<template>

  <div class="main_bottom">
    <div class="main_left">
      <div class="menu_item" id="qualityAnalysis.home"
           :style="{ background: selectMenu === 1 ? '#F0F3F8' : '#fff', color: selectMenu === 1 ? '#116DEE' : '#2A2A2A' }"
           @click="checkMenu(1)">首页</div>
      <div class="menu_item" id="qualityAnalysis.defectCategory"
           :style="{ background: selectMenu === 2 ? '#F0F3F8' : '#fff', color: selectMenu === 2 ? '#116DEE' : '#2A2A2A' }"
           @click="checkMenu(2)">缺陷类别</div>
      <div class="menu_item" id="qualityAnalysis.defectPosition"
           :style="{ background: selectMenu === 3 ? '#F0F3F8' : '#fff', color: selectMenu === 3 ? '#116DEE' : '#2A2A2A' }"
           @click="checkMenu(3)">缺陷位置</div>
      <div class="menu_item" id="qualityAnalysis.defectAnalysis"
           :style="{ background: selectMenu === 4 ? '#F0F3F8' : '#fff', color: selectMenu === 4 ? '#116DEE' : '#2A2A2A' }"
           @click="checkMenu(4)">数据分析</div>
      <div class="menu_item" id="qualityAnalysis.qualityWarning"
           :style="{ background: selectMenu === 5 ? '#F0F3F8' : '#fff', color: selectMenu === 5 ? '#116DEE' : '#2A2A2A' }"
           @click="checkMenu(5)">质量预警</div>
    </div>
    <div class="main_right">
      <div class="main_center" v-if="selectMenu === 1">
        <div class="menu_select">
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">开始时间 </span>
              <el-date-picker   v-selfdbclick  v-model="queryMain.startTime" type="datetime" placeholder="选择开始日期">
              </el-date-picker>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">结束时间 </span>
              <el-date-picker   v-selfdbclick  v-model="queryMain.endTime" type="datetime" placeholder="选择结束日期">
              </el-date-picker>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">产品名称 </span>
              <el-select v-model="queryMain.productName" @change="handleProductNameChange">
                <el-option v-for="item in productNames" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">物料颜色 </span>
              <el-select  v-model="queryMain.color">
                <el-option v-for="item in productColors" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>

          </div>

          <!-- <div class="data_list">
            <div class="select_item">
              <span class="demonstration">SN: </span>
              <el-input v-model="queryMain.qrCode"></el-input>
            </div>

          </div> -->
          <div class="data_list" style="flex:3">
            <div class="btn_list">
              <!-- <div class="btn" @click="search(1)">查询</div>
              <div class="btn_export" style="margin-left: 15px;" @click="exportData">导出数据</div> -->
              <el-button type="primary" @click="search(1)">查询</el-button>
              <el-button type="primary" @click="exportData">导出数据</el-button>
            </div>

          </div>
        </div>
        <div class="main_content">

          <div class="content_item">
            <div class="item_title">数据分析</div>
            <div class="item_main">
              <div class="main_top">
                <div class="item_card">
                  <div class="card_left">
                    <div class="left_title">总良率</div>
                    <div class="left_per" style="color: #00DA93">{{ data.totalData.rateAll }}%</div>
                    <div class="left_content">
                      <span class="percent" style="color: #1A80F3" >{{ data.totalData.addRateAll }}%</span>
                      <span class="percent_img">
                        <img :src="data.totalData.addRateAll>0 ? upImg : downImg">
                      </span>
                      <span class="percent_tip">比三小时前</span>
                    </div>
                  </div>
                  <div class="card_right">
                    <div class="card_color">
                      <img src="../../assets/pic_common_trend_green.png">
                    </div>
                  </div>
                </div>
                <div class="item_card" style="margin-left: 10px;background-color: #F0F3F8;">
                  <div class="card_list" v-for="(item, index) in data.totalRate"
                       :style="{ marginLeft: index === 1 || index === 3 ? '10px' : '0px',marginTop: index === 2 || index === 3 ? '10px' : '0px'}">
                    <div class="card_left">
                      <div class="left_title_children">{{ item.label }}</div>
                      <div class="left_per_children" style="color: #00DA93">{{ item.value }}%</div>
                      <div class="left_content">
                        <span class="percent" style="color: #00DA93" >{{ item.rate }}%</span>
                        <span class="percent_img">
                          <img :src="item.rate > 0 ? upImg : downImg">
                        </span>
                        <span class="percent_tip">比三小时前</span>
                      </div>
                    </div>
                    <div class="card_right">
                      <div class="card_color">
                        <img src="../../assets/pic_common_trend_green_small.png">
                      </div>
                    </div>
                  </div>

                </div>
              </div>
              <div class="main_top" style="margin-top: 10px;">
                <div class="item_card">
                  <div class="card_left">
                    <div class="left_title">外观良率</div>
                    <div class="left_per" style="color: #FFDA2E">{{ data.totalData.rateWg }}%</div>
                    <div class="left_content">
                      <span class="percent" style="color: #1A80F3" >{{ data.totalData.addRateWg }}%</span>
                      <span class="percent_img">
                        <img :src="data.totalData.addRateWg>0 ? upImg : downImg">
                      </span>
                      <span class="percent_tip">比三小时前</span>
                    </div>
                  </div>
                  <div class="card_right">
                    <div class="card_color">
                      <img src="../../assets/pic_common_trend_yellow.png">
                    </div>
                  </div>
                </div>
                <div class="item_card" style="margin-left: 10px;">
                  <div class="card_left">
                    <div class="left_title">辅料良率</div>
                    <div class="left_per" style="color: #1A80F3">{{ data.totalData.rateFl }}%</div>
                    <div class="left_content">
                      <span class="percent" style="color: #1A80F3" >{{ data.totalData.addRateFl }}%</span>
                      <span class="percent_img">
                        <img :src="data.totalData.addRateFl>0 ? upImg : downImg">
                      </span>
                      <span class="percent_tip">比三小时前</span>
                    </div>
                  </div>
                  <div class="card_right">
                    <div class="card_color">
                      <img src="../../assets/pic_common_trend_blue.png">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content_item" style="margin-left: 10px;">
            <div class="item_title">TOP缺陷</div>
            <div class="right_card_content">
              <div class="card_top">
                <div class="title_list">外观</div>
                <div class="title_list">辅料</div>
              </div>
              <div class="card_bottom">
                <div class="bottom_list">
                  <div class="list_item" v-for="(item, index) in data.wgDefectTop">

                    <div class="bottom_item1" style="background-color: #1A80F3;" :style="{ opacity: 1 - 0.05 * index }"></div>
                    <el-tooltip placement="top" v-if="item.label.length>18">
                      <div slot="content">{{ item.label }}</div>
                      <div class="bottom_item2">{{ item.label.slice(0, 18) }}<span v-show="item.label.length>18">...</span></div>
                    </el-tooltip>
                    <div class="bottom_item2" v-else>{{ item.label }}</div>
                    <div class="bottom_item3">{{ item.value }}%</div>
                  </div>
                </div>

                <div class="bottom_list">
                  <div class="list_item" v-for="(item, index) in data.flDefectTop">
                    <div class="bottom_item1" style="background-color: #00DA93" :style="{ opacity: 1 - 0.05 * index }"></div>
                    <el-tooltip placement="top" v-if="item.label.length>18">
                      <div slot="content">{{ item.label }}</div>
                      <div class="bottom_item2">{{ item.label.slice(0, 18) }}<span v-show="item.label.length>18">...</span></div>
                    </el-tooltip>
                    <div class="bottom_item2" v-else>{{ item.label }}</div>
                    <div class="bottom_item3">{{ item.value }}%</div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="main_center" v-if="selectMenu === 2">
        <div class="menu_select">
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">开始时间 </span>
              <el-date-picker   v-selfdbclick  v-model="queryMain.startTime" type="datetime" placeholder="选择开始日期">
              </el-date-picker>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">结束时间 </span>
              <el-date-picker   v-selfdbclick  v-model="queryMain.endTime" type="datetime" placeholder="选择结束日期">
              </el-date-picker>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">产品名称 </span>
              <el-select v-model="queryMain.productName" @change="handleProductNameChange">
                <el-option v-for="item in productNames" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">物料颜色 </span>
              <el-select  v-model="queryMain.color">
                <el-option v-for="item in productColors" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>

          </div>
          <!-- <div class="data_list">
            <div class="select_item">
              <span class="demonstration">SN: </span>
              <el-input v-model="queryMain.qrCode"></el-input>
            </div>

          </div> -->
          <div class="data_list" style="flex:3">
            <div class="btn_list">
              <el-button type="primary" @click="search(2)">查询</el-button>
              <el-button type="primary" @click="exportData">导出数据</el-button>
            </div>

          </div>
        </div>
        <div class="main_checkbox">
          <el-radio v-model="queryMain.productOrDefect" label="product" @change="setType(queryMain.productOrDefect,2)">按产品数</el-radio>
          <el-radio v-model="queryMain.productOrDefect" label="defect"  @change="setType(queryMain.productOrDefect,2)">按缺陷数</el-radio>
        </div>
        <div class="main_item">
          <div class="item_content">
            <div class="content_text">外观</div>
            <div class="content_echart" style="flex:2;">
              <div class="total_show">总数:{{ analysis.wgtotal }}</div>
              <div class="top_center_title">外观数据</div>
              <div id="echarts" style="height: calc(100% - 90px);margin-top: 25px;"></div>
            </div>
            <div class="content_echart" style="flex:2">
              <div class="top_center_title">外观缺陷趋势</div>
              <div id="echarts2" style="height: calc(100% - 90px);margin-top: 25px"></div>

            </div>
            <div class="content_echart" style="flex:3">

              <div class="bottom_table" style="height:calc(100% - 10px);overflow-y: auto; width: 670px">
                <div class="table_list" >
                  <el-table
                    :data="analysis.wgPercentage"
                    border
                    :header-cell-style="{fontSize: '14px', backgroundColor: '#EBEFF5', color: '#2A2A2A'}"
                    height="100%"
                    :span-method="(params) => objectSpanMethod(params, analysis.wgPercentage)"
                  >
                    <el-table-column label="序号" width="50" prop="rowNumber">
                      <template slot-scope="scope">
                        <div>{{ scope.row.rowNumber }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="类型" width="180"></el-table-column>
                    <el-table-column prop="value" label="数量" width="50"></el-table-column>
                    <el-table-column label="不良占比" width="80" prop="percentage">
                      <template slot="header">
                        <el-tooltip placement="top">
                          <div slot="content" v-if="queryMain.productOrDefect==='product'">不良占比=缺陷数量(去重)/外观不良产品数</div>
                          <div slot="content" v-else>不良占比=缺陷数量(不去重)/外观不良缺陷总数</div>
                          <div>不良占比</div>
                        </el-tooltip>
                      </template>
                      <template slot-scope="scope">
                        <span>{{ scope.row.percentage }}%</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="dataName" label="区域" width="60px"></el-table-column>
                    <el-table-column prop="dataValue" label="数量" width="50px"></el-table-column>
                    <el-table-column prop="dataPercentage" label="区域内占比" width="100px">
                      <template slot="header">
                        <el-tooltip placement="top">
                          <div slot="content" v-if="queryMain.productOrDefect==='product'">区域内占比=区域内缺陷数量(去重)/该类型缺陷总数</div>
                          <div slot="content" v-else>区域内占比=区域内缺陷数量(不去重)/该类型缺陷总数</div>
                          <div>区域内占比</div>
                        </el-tooltip>
                      </template>
                      <template slot-scope="scope">
                        <span>{{ scope.row.dataPercentage }}%</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="dataPercentageAll" label="不良占比">
                      <template slot-scope="scope">
                        <span>{{ scope.row.dataPercentageAll }}%</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
          <div class="item_content" style="margin-top: 10px;">
            <div class="content_text">辅料</div>

            <div class="content_echart" style="flex:2;">
              <div class="total_show">总数:{{ analysis.fltotal }}</div>
              <div class="top_center_title">辅料数据</div>
              <div id="echarts3" style="height: calc(100% - 90px);margin-top: 25px;"></div>
            </div>
            <div class="content_echart" style="flex:2">
              <div class="top_center_title">辅料缺陷趋势</div>
              <div id="echarts4" style="height: calc(100% - 90px);margin-top: 25px"></div>

            </div>
            <div class="content_echart" style="flex:3">
              <div class="bottom_table" style="height:calc(100% - 10px);overflow-y: auto; width: 670px">
                <div class="table_list" >
                  <el-table
                    :data="analysis.flPercentage"
                    border
                    :header-cell-style="{fontSize: '14px', backgroundColor: '#EBEFF5', color: '#2A2A2A'}"
                    height="100%"
                    :span-method="(params) => objectSpanMethod(params, analysis.flPercentage)"
                  >
                    <el-table-column label="序号" width="50" prop="rowNumber">
                      <template slot-scope="scope">
                        <div>{{ scope.row.rowNumber }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="类型" width="180"></el-table-column>
                    <el-table-column prop="value" label="数量" width="50"></el-table-column>
                    <el-table-column label="不良占比" width="80" prop="percentage">
                      <template slot="header">
                        <el-tooltip placement="top">
                          <div slot="content" v-if="queryMain.productOrDefect==='product'">不良占比=缺陷数量(去重)/辅料不良产品数</div>
                          <div slot="content" v-else>不良占比=缺陷数量(不去重)/辅料不良缺陷总数</div>
                          <div>不良占比</div>
                        </el-tooltip>
                      </template>
                      <template slot-scope="scope">
                        <span>{{ scope.row.percentage }}%</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="dataName" label="区域" width="60"></el-table-column>
                    <el-table-column prop="dataValue" label="数量" width="50"></el-table-column>
                    <el-table-column prop="dataPercentage" label="区域内占比" width="100">
                      <template slot="header">
                        <el-tooltip placement="top">
                          <div slot="content" v-if="queryMain.productOrDefect==='product'">区域内占比=区域内缺陷数量(去重)/该类型缺陷总数</div>
                          <div slot="content" v-else>区域内占比=区域内缺陷数量(不去重)/该类型缺陷总数</div>
                          <div>区域内占比</div>
                        </el-tooltip>
                      </template>
                      <template slot-scope="scope">
                        <span>{{ scope.row.dataPercentage }}%</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="dataPercentageAll" label="不良占比">
                      <template slot-scope="scope">
                        <span>{{ scope.row.dataPercentageAll }}%</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main_center" v-if="selectMenu === 3">
        <div class="menu_select">
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">开始时间 </span>
              <el-date-picker   v-selfdbclick  v-model="queryMain.startTime" type="datetime" placeholder="选择开始日期">
              </el-date-picker>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">结束时间 </span>
              <el-date-picker   v-selfdbclick  v-model="queryMain.endTime" type="datetime" placeholder="选择结束日期">
              </el-date-picker>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">产品名称 </span>
              <el-select v-model="queryMain.productName" @change="handleProductNameChange">
                <el-option v-for="item in productNames" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">物料颜色 </span>
              <el-select  v-model="queryMain.color">
                <el-option v-for="item in productColors" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>

          </div>

          <!-- <div class="data_list">
            <div class="select_item">
              <span class="demonstration">SN: </span>
              <el-input v-model="queryMain.qrCode"></el-input>
            </div>

          </div> -->
          <div class="data_list" style="flex:3">
            <div class="btn_list">
              <el-button type="primary" @click="search(3)">查询</el-button>
              <el-button type="primary" @click="exportData">导出数据</el-button>
            </div>

          </div>
        </div>
        <div class="main_checkbox">
          <el-radio v-model="queryMain.productOrDefect" label="product" @change="setType(queryMain.productOrDefect,3)">按产品数</el-radio>
          <el-radio v-model="queryMain.productOrDefect" label="defect" @change="setType(queryMain.productOrDefect,3)">按缺陷数</el-radio>
        </div>
        <div class="main_item">
          <div class="item_content">
            <div class="content_text">外观</div>
            <div class="content_echart" style="flex:2;flex-direction: column">
              <!-- <div class="top_center_title">外观位置</div> -->
              <div class="top_content">
                <div class="top_img">
                  <img :src="size.wgDefectImg" alt="">
                </div>
                <!-- <div class="top_img_right">
                  <div class="top_img_item">
                    <span class="span_color">1</span>
                    <span class="span_text">侧边直边</span>
                  </div>
                  <div class="top_img_item">
                    <span class="span_color">2</span>
                    <span class="span_text">侧边拐角</span>
                  </div>
                  <div class="top_img_item">
                    <span class="span_color">3</span>
                    <span class="span_text">侧边小件</span>
                  </div>
                  <div class="top_img_item">
                    <span class="span_color">4</span>
                    <span class="span_text">TP辅料</span>
                  </div>
                </div> -->
              </div>
            </div>
            <div class="content_echart" style="flex:2">
              <div class="top_center_title">外观缺陷趋势</div>
              <div id="echarts7" style="height: calc(100% - 90px);margin-top: 25px"></div>

            </div>
            <div class="content_echart" style="flex:3">

              <div class="bottom_table" style="height:calc(100% - 10px);overflow-y: auto; width: 670px">
                <div class="table_list" >
                  <el-table
                    :data="size.wgPercentage"
                    border
                    :header-cell-style="{fontSize: '14px', backgroundColor: '#EBEFF5', color: '#2A2A2A'}"
                    height="100%"
                    :span-method="(params) => objectSpanMethod(params, size.wgPercentage)"
                  >
                    <el-table-column label="序号" width="50px" prop="rowNumber">
                      <template slot-scope="scope">
                        <div>{{ scope.row.rowNumber }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="区域" width="60px"></el-table-column>
                    <el-table-column prop="value" label="数量" width="50px"></el-table-column>
                    <el-table-column label="不良占比" prop="percentage">
                      <template slot="header">
                        <el-tooltip placement="top">
                          <div slot="content" v-if="queryMain.productOrDefect==='product'">不良占比=区域内缺陷数量(去重)/外观不良产品数</div>
                          <div slot="content" v-else>不良占比=区域内缺陷数量(不去重)/外观不良缺陷总数</div>
                          <div>不良占比</div>
                        </el-tooltip>
                      </template>
                      <template slot-scope="scope">
                        <span>{{ scope.row.percentage }}%</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="dataName" label="类型" width="180px"></el-table-column>
                    <el-table-column prop="dataValue" label="数量" width="50px"></el-table-column>
                    <el-table-column prop="dataPercentage" label="区域内占比" width="100px">
                      <template slot="header">
                        <el-tooltip placement="top">
                          <div slot="content" v-if="queryMain.productOrDefect==='product'">区域内占比=区域内类型数量(去重)/区域内缺陷总数</div>
                          <div slot="content" v-else>区域内占比=区域内类型数量(不去重)/区域内缺陷总数</div>
                          <div>区域内占比</div>
                        </el-tooltip>
                      </template>
                      <template slot-scope="scope">
                        <span>{{ scope.row.dataPercentage }}%</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="dataPercentageAll" label="不良占比">
                      <template slot-scope="scope">
                        <span>{{ scope.row.dataPercentageAll }}%</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
          <div class="item_content" style="margin-top: 10px;">
            <div class="content_text">辅料</div>
            <div class="content_echart" style="flex:2">
              <!-- <div class="top_center_title">辅料位置</div> -->
              <div class="top_content">
                <div class="top_img">
                  <img :src="size.flDefectImg"  alt="">
                </div>
                <!-- <div class="top_img_right">
                  <div class="top_img_item">
                    <span class="span_color">1</span>
                    <span class="span_text">侧边直边</span>
                  </div>
                  <div class="top_img_item">
                    <span class="span_color">2</span>
                    <span class="span_text">侧边拐角</span>
                  </div>
                  <div class="top_img_item">
                    <span class="span_color">3</span>
                    <span class="span_text">侧边小件</span>
                  </div>
                  <div class="top_img_item">
                    <span class="span_color">4</span>
                    <span class="span_text">TP辅料</span>
                  </div>
                </div> -->
              </div>
            </div>
            <div class="content_echart" style="flex:2">
              <div class="top_center_title">辅料缺陷趋势</div>
              <div id="echarts8" style="height: calc(100% - 90px);margin-top: 25px"></div>

            </div>
            <div class="content_echart" style="flex:3">
              <div class="bottom_table" style="height:calc(100% - 10px);overflow-y: auto; width: 670px">
                <div class="table_list" >
                  <el-table
                    :data="size.flPercentage"
                    border
                    :header-cell-style="{fontSize: '14px', backgroundColor: '#EBEFF5', color: '#2A2A2A'}"
                    height="100%"
                    :span-method="(params) => objectSpanMethod(params, size.flPercentage)"
                  >
                    <el-table-column label="序号" width="50px" prop="rowNumber">
                      <template slot-scope="scope">
                        <div>{{ scope.row.rowNumber }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="区域" width="60px"></el-table-column>
                    <el-table-column prop="value" label="数量" width="50px"></el-table-column>
                    <el-table-column label="不良占比" prop="percentage">
                      <template slot="header">
                        <el-tooltip placement="top">
                          <div slot="content" v-if="queryMain.productOrDefect==='product'">不良占比=区域内缺陷数量(去重)/辅料不良产品数</div>
                          <div slot="content" v-else>不良占比=区域内缺陷数量(不去重)/辅料不良缺陷总数</div>
                          <div>不良占比</div>
                        </el-tooltip>
                      </template>
                      <template slot-scope="scope">
                        <span>{{ scope.row.percentage }}%</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="dataName" label="类型" width="180px"></el-table-column>
                    <el-table-column prop="dataValue" label="数量" width="50px"></el-table-column>
                    <el-table-column prop="dataPercentage" label="区域内占比" width="100px">
                      <template slot="header">
                        <el-tooltip placement="top">
                          <div slot="content" v-if="queryMain.productOrDefect==='product'">区域内占比=区域内类型数量(去重)/区域内缺陷总数</div>
                          <div slot="content" v-else>区域内占比=区域内类型数量(不去重)/区域内缺陷总数</div>
                          <div>区域内占比</div>
                        </el-tooltip>
                      </template>
                      <template slot-scope="scope">
                        <span>{{ scope.row.dataPercentage }}%</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="dataPercentageAll" label="不良占比">
                      <template slot-scope="scope">
                        <span>{{ scope.row.dataPercentageAll }}%</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据分析 -->
      <DataAnalysis
        v-if="selectMenu === 4"
        :qtCall="this.qtCall"
        :startDate="queryMain.startTime"
        :endDate="queryMain.endTime"
        :color="queryMain.color"
        :productName="queryMain.productName"
        :productNames="productNames"
        :productColors="productColors"
        :allColor="allColor"
        :productNameAndColor="productNameAndColor"
        :exportData="exportData"
        @update:startDate="updateStartDate"
        @update:endDate="updateEndDate"
        @update:color="updateColor"
        @update:productName="updateProductName"
      ></DataAnalysis>
      <div class="main_center" v-if="selectMenu === 5"><!-- 质量预警 -->
        <div class="menu_select">
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">开始时间 </span>
              <el-date-picker   v-selfdbclick  v-model="queryMain.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始日期">
              </el-date-picker>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">结束时间 </span>
              <el-date-picker   v-selfdbclick  v-model="queryMain.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束日期">
              </el-date-picker>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">产品名称 </span>
              <el-select v-model="queryMain.productName" @change="handleProductNameChange">
                <el-option v-for="item in productNames" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">物料颜色 </span>
              <el-select  v-model="queryMain.color">
                <el-option v-for="item in productColors" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>

          </div>
          <!-- <div class="data_list">
            <div class="select_item">
              <span class="demonstration">SN: </span>
              <el-input v-model="queryMain_quality_warn.qrCode"></el-input>
            </div>

          </div> -->
          <div class="data_list" style="flex:3">
            <div class="btn_list">
              <!-- <div class="btn" @click="search_quality_warn">查询</div> -->

              <el-button type="primary" @click="search_quality_warn">查询</el-button>
              <el-button type="primary" @click="exportData">导出数据</el-button>
            </div>

            <div></div>

          </div>
        </div>
        <div class="main_content" style="padding: 0; width: 100%">

          <el-row style="width:100%;">
            <!-- <el-card> -->

            <!-- </el-card> -->
            <el-col :span="6">
              <el-card  style="overflow: visible;"><!-- style="width:(100% - 10px)" -->
                <div style="font-size: 16px;font-weight: 600;">预警占比</div>
                <div id="echarts5"
                     style="height:calc(100vh - 340px);width:100%;margin-left: 0px;padding-top: 20px;box-sizing: border-box;">
                </div>
              </el-card>
              <!-- <div>99999</div> -->
            </el-col>
            <el-col :span="18" style="width: 75%">
              <el-row><el-button @click="alarmSet" type="primary">预警规则设置</el-button></el-row>
              <el-row style="margin-top: 2px;background:white">
                <div style="padding:0;min-height: calc(100vh - 310px)"><!-- min-height: calc(100vh - 350px) -->
                  <el-table
                    :data="tableData_warningdatas" style="width: 100%; height: 730px; overflow-y: auto;"
                    :header-cell-style="{'font-weight':'bold', color:'#2A2A2A'}"
                    :height="730"
                  >
                    <!-- <el-table-column prop="number" label="NO" width="180"> -->
                    <!-- </el-table-column> -->
                    <el-table-column prop="dateTime" label="发生时间" width="180">
                    </el-table-column>
                    <el-table-column prop="isNeedShutDown" label="是否需要停机" width="120">
                    </el-table-column>
                    <el-table-column prop="setValue" width="120" label="预警设置值">
                    </el-table-column>
                    <el-table-column prop="realValue" label="实际值" width="80">
                    </el-table-column>
                    <el-table-column prop="warningText" label="预警内容">
                    </el-table-column>
                    <!--                    <el-table-column prop="des" label="备注">-->
                    <!--                    </el-table-column>-->
                    <!-- <el-table-column prop="userType" label="角色">
                    </el-table-column>
                    <el-table-column prop="userId" label="员工工号">
                    </el-table-column>
                    <el-table-column prop="userName" label="员工姓名">
                    </el-table-column> -->
                  </el-table>
                </div>
              </el-row>
            </el-col>
          </el-row>
        </div>

      </div>
    </div>
  </div>

</template>

<script>
import qwebchannel from '../../qt5.15webchannel.js';
import * as echarts from 'echarts';
import { Message } from 'element-ui';
import up from '../../assets/ic_quality_analysis_drop_small.png'
import down from '../../assets/ic_quality_analysis_drop.png'

import DataAnalysis from "./DataAnalysis.vue";
import { validPermision, formatDate } from '../../utils/tools.js';

export default {
  name: 'BoneDen',
  components: {
    DataAnalysis
  },
  data() {
    return {
      mapColors:{},
      productNames:[],
      productColors: [],
      tableData_warningdatas:[],
      selectMenu: 1,
      option: null,
      option2: null,
      option5: null,
      option5SeriesTotal: 0,
      option7:null,
      option8:null,
      upImg: up,
      qtCall:null,
      downImg: down,
      rateAllRate: false,
      rateWgRate: false,
      rateFlRate: false,
      tableModels: [],
      tableData: [],
      tableData_warning: [/* {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          } */],
      queryMain: {
        type: 1,
        startTime: "",
        endTime: "",
        color: "全部",//产品颜色 默认全部
        productName: "全部",//产品名称，默认全部
        productOrDefect: "product",//按照产品或缺陷，默认按产品
        qrCode: ""	//sn码，不输入默认为空，则忽略不过滤
      },
      // queryMain_quality_warn: {
      //   type: 5,
      //   startTime: "",
      //   endTime: "",
      //   color: "全部",//产品颜色 默认全部
      //   productName: "全部",//产品名称，默认全部
      //   productOrDefect: "product",//按照产品或缺陷，默认按产品
      //   qrCode: ""	//sn码，不输入默认为空，则忽略不过滤
      // },

      // 缺陷位置
      size: {
        productOrDefect: "product",
        wgDefectImg:'',
        flDefectImg:'',
        wgTrend: [
          {
            dateTime: "",
            data: [
              // {
              //   label: "辅料1",
              //   value: 44
              // },
              // {
              //   label: "辅料2",
              //   value: 55
              // },
              // {
              //   label: "辅料3",
              //   value: 44
              // },
              // {
              //   label: "辅料4",
              //   value: 33
              // },
              // {
              //   label: "辅料5",
              //   value: 44
              // }
            ]
          },
          {
            dateTime: "",
            data: [
              // {
              //   label: "辅料1",
              //   value: 1
              // },
              // {
              //   label: "辅料2",
              //   value: 1
              // },
              // {
              //   label: "辅料3",
              //   value: 1
              // },
              // {
              //   label: "辅料4",
              //   value: 1
              // },
              // {
              //   label: "辅料5",
              //   value: 1
              // }

            ]
          },
          {
            dateTime: "",
            data: [
              // {
              //   label: "辅料1",
              //   value: 1
              // },
              // {
              //   label: "辅料2",
              //   value: 1
              // },
              // {
              //   label: "辅料3",
              //   value: 1
              // },
              // {
              //   label: "辅料4",
              //   value: 1
              // },
              // {
              //   label: "辅料5",
              //   value: 1
              // }
            ]
          }
        ],
        data: [
          {
            dateTime: "",
            val: [
              // {
              //   label: "辅料1",
              //   value: 3
              // },
              // {
              //   label: "辅料2",
              //   value: 3
              // },
              // {
              //   label: "辅料3",
              //   value: 3
              // },
              // {
              //   label: "辅料4",
              //   value: 3
              // },
              // {
              //   label: "辅料5",
              //   value: 3
              // }
            ]
          },
        ],
        flTrend: [
          {
            dateTime: "",
            data: [
              // {
              //   label: "辅料1",
              //   value: 3
              // },
              // {
              //   label: "辅料2",
              //   value: 3
              // },
              // {
              //   label: "辅料3",
              //   value: 3
              // },
              // {
              //   label: "辅料4",
              //   value: 3
              // },
              // {
              //   label: "辅料5",
              //   value: 3
              // }
            ]
          },
          {
            dateTime: "",
            data: [
              // {
              //   label: "辅料1",
              //   value: 1
              // },
              // {
              //   label: "辅料2",
              //   value: 1
              // },
              // {
              //   label: "辅料3",
              //   value: 1
              // },
              // {
              //   label: "辅料4",
              //   value: 1
              // },
              // {
              //   label: "辅料5",
              //   value: 1
              // }

            ]
          },
          {
            dateTime: "",
            data: [
              // {
              //   label: "辅料1",
              //   value: 1
              // },
              // {
              //   label: "辅料2",
              //   value: 3
              // },
              // {
              //   label: "辅料3",
              //   value: 5
              // },
              // {
              //   label: "辅料4",
              //   value: 7
              // },
              // {
              //   label: "辅料5",
              //   value: 9
              // }
            ]
          }
        ],
        wgPercentage: [],
        flPercentage: [],
        wgtotal: 0,
        fltotal: 0
      },
      flatData: [],
      wgPercentage: [
        {
          "data": [
            {
              "name": "假缺陷",
              "percentage": "87.50",
              "percentageAll": "75.00",
              "value": 21
            },
            {
              "name": "CG三伤",
              "percentage": "8.33",
              "percentageAll": "7.14",
              "value": 2
            },
            {
              "name": "CG大面缺陷",
              "percentage": "4.17",
              "percentageAll": "3.57",
              "value": 1
            }
          ],
          "name": "A8",
          "percentage": "85.71",
          "value": 24
        },
        {
          "data": [
            {
              "name": "镜片白点",
              "percentage": "100.00",
              "percentageAll": "7.14",
              "value": 2
            }
          ],
          "name": "C1",
          "percentage": "7.14",
          "value": 2
        },
        {
          "data": [
            {
              "name": "装饰环缺陷",
              "percentage": "100.00",
              "percentageAll": "3.57",
              "value": 1
            }
          ],
          "name": "C2",
          "percentage": "3.57",
          "value": 1
        },
        {
          "data": [
            {
              "name": "板材三伤",
              "percentage": "100.00",
              "percentageAll": "3.57",
              "value": 1
            }
          ],
          "name": "D1",
          "percentage": "3.57",
          "value": 1
        }
      ],
      flPercentage: [
        {
          "data": [
            {
              "name": "假缺陷",
              "percentage": "87.50",
              "percentageAll": "75.00",
              "value": 1
            },
            {
              "name": "CG三伤",
              "percentage": "8.33",
              "percentageAll": "7.14",
              "value": 2
            },
            {
              "name": "CG大面缺陷",
              "percentage": "4.17",
              "percentageAll": "3.57",
              "value": 1
            }
          ],
          "name": "A8",
          "percentage": "85.71",
          "value": 24
        },
        {
          "data": [
            {
              "name": "镜片白点",
              "percentage": "100.00",
              "percentageAll": "7.14",
              "value": 2
            }
          ],
          "name": "C1",
          "percentage": "7.14",
          "value": 2
        },
        {
          "data": [
            {
              "name": "装饰环缺陷",
              "percentage": "100.00",
              "percentageAll": "3.57",
              "value": 1
            }
          ],
          "name": "C2",
          "percentage": "3.57",
          "value": 1
        },
        {
          "data": [
            {
              "name": "板材三伤",
              "percentage": "100.00",
              "percentageAll": "3.57",
              "value": 1
            }
          ],
          "name": "D1",
          "percentage": "3.57",
          "value": 1
        }
      ],
      // 缺陷类别
      analysis: {
        flDefectTop: [
          // {
          //   label: "压伤x",
          //   value: "5.00"
          // },
          // {
          //   label: "压伤x",
          //   value: "5.00"
          // },
          // {
          //   label: "压伤x",
          //   value: "5.00"
          // },
          // {
          //   label: "压伤x",
          //   value: "5.00"
          // },
          // {
          //   label: "压伤x",
          //   value: "5.00"
          // }
        ],
        flPercentage: [

        ],
        flTrend: [
          // {
          //   data: [
          //     {
          //       label: "111",
          //       value: "0.50"
          //     }
          //   ],
          //   dateTime: "20240727"
          // }
        ],
        wgDefectTop: [
          // {
          //   label: "异物x",
          //   value: "5.00"
          // },
          // {
          //   label: "异物x",
          //   value: "5.00"
          // },
          // {
          //   label: "异物x",
          //   value: "5.00"
          // },
          // {
          //   label: "异物x",
          //   value: "5.00"
          // },
          // {
          //   label: "异物x",
          //   value: "5.00"
          // }
        ],
        wgPercentage: [],
        wgTrend: [],
        wgOther: [],
        flOther: [],
        wgtotal: 0,
        fltotal: 0
      },
      data: {
        totalData: {//数据
          productName: "",//产品名称
          productColor: "",//生产颜色
          ct: 0,//ct时间
          countAll: 0,//总数
          countOk: 0,//ok数
          countNg: 0,//ng数
          rateAll: 0,//总良率
          rateWg: 0,//外观良率
          rateFl: 0		//辅料良率
        },

        totalRate: [//总良率
          {
            label: "",
            value: 0,
          },
          {
            label: "",
            value: 0
          },
          {
            label: "",
            value: 0
          },
          {
            label: "",
            value: 0
          }
        ],
        totalDataHistory: {//数据
          productName: "",//产品名称
          productColor: "",//生产颜色
          ct: 0,//ct时间
          countAll: 0,//总数
          countOk: 0,//ok数
          countNg: 0,//ng数
          rateAll: 0,//总良率
          rateWg: 0,//外观良率
          rateFl: 0		//辅料良率
        },
        totalRateHistory: [//总良率
          // {
          //   label: "device1",
          //   value: 8,
          // },
          // {
          //   label: "device2",
          //   value: 8
          // },
          // {
          //   label: "device3",
          //   value: 8
          // },
          // {
          //   label: "device4",
          //   value: 8
          // }

        ],
        flDefectTop: [//辅料缺陷TOP项
          // {
          //   label: "压伤",
          //   value: 1
          // },
          // {
          //   label: "划伤",
          //   value: 1
          // },
          // {
          //   label: "脏污",
          //   value: 1
          // },
          // {
          //   label: "压伤",
          //   value: 1
          // },
          // {
          //   label: "划伤",
          //   value: 1
          // },
          // {
          //   label: "脏污",
          //   value: 1
          // },
          // {
          //   label: "压伤",
          //   value: 1
          // },
          // {
          //   label: "划伤",
          //   value: 1
          // },
          // {
          //   label: "脏污",
          //   value: 1
          // },
          // {
          //   label: "压伤",
          //   value: 1
          // },

        ],
        wgDefectTop: [//外观缺陷TOP项
          // {
          //   label: "压伤",
          //   value: 1
          // },
          // {
          //   label: "划伤",
          //   value: 1
          // },
          // {
          //   label: "脏污",
          //   value: 1
          // }
        ]
      },
      defectCountAll: 0,
      fixedColors: [
        '#0F62FE', '#6BB2FB', '#F061E7', '#FFDA2E', '#8A3BEF',
        '#09DA97', '#6884FF', '#FFA495', '#87D46A', '#6699FF',
        '#B261F0', '#B866F7'
      ],
      productNameAndColor: {},
      allColor: [],
      initCount:0
    }
  },
  created() {

  },
  mounted() {

    if (process.env.NODE_ENV === 'production') {
      // new qwebchannel.QWebChannel(qt.webChannelTransport, (channel) => {
      // this.qtCall = channel.objects.webBridge;
      this.qtCall = this.$qtCall

      this.qtCall.QtToJs.connect((func, json) => {
        if (func == "RefreshHistoryInIndexQualityAnalysis") {

          const datas = JSON.parse(json)
          if (datas.code === 200) {
            this.data = datas.data
            console.log(this.data)
            console.log('接口返回 RefreshHistoryInIndexQualityAnalysis-mounted' ,datas.data)
            this.rateAllRate = parseFloat(this.data.totalData.addRateAll) > 0 ? true : false
            this.rateWgRate = parseFloat(this.data.totalData.addRateWg) > 0 ? true : false
            this.rateFlRate = parseFloat(this.data.totalData.addRateFl) > 0 ? true : false
          }
        }
        if (func == "setSomeDefaultData") {
          const datas = JSON.parse(json)
          if (datas.code === 200) {
            this.productColors = datas.data.productColor.split(',')
            this.allColor = this.productColors;
            this.productNames = datas.data.productNames.map(item => item.label);
            this.productNameAndColor = datas.data.productNames.reduce((acc, item) => {
              acc[item.label] = item.value;
              return acc;
            }, {});
            this.queryMain.productName = this.productNames[0]
            this.queryMain.color = this.productColors[0]
            this.queryMain.startTime = datas.data.startTime
            this.queryMain.endTime = datas.data.endTime
            if(this.initCount==0){
              console.log("NeedQueryHistoryInQualityAnalysis传参", this.queryMain)
              this.qtCall.JsToQt("NeedQueryHistoryInQualityAnalysis", this.queryMain);//可以传给qt
              this.initCount++
            }
          }
        }
        if(func == 'RefreshHistoryQualityWarnInQualityAnalysis'){
          const datas = JSON.parse(json)
          if (datas.code === 200) {
            console.log('质量预警接口', datas.data)
            this.tableData_warningdatas = datas.data['QualityWarning']
            this.option5.series[0].data=[]
            var optdata = datas.data['DefectTop']
            for (let index = 0; index < optdata.length; index++) {
              const element = optdata[index];
              this.option5.series[0].data.push({name: element.label, value: element.value})
            }
            console.log('质量预警统计图数据', this.option5.series)
            this.option5SeriesTotal = this.option5.series[0].data.reduce((acc, cur) => acc + parseFloat(cur.value), 0);
            console.log('质量预警统计图总数', this.option5SeriesTotal)
            this.myChart5.setOption(this.option5, { notMerge: true });//更新饼图
          }
        }
      })
      this.qtCall.JsToQt("NeedSetSomeDefaultData", {});
      // });
      validPermision(this.selectMenu)
    } else{
      if(this.wgPercentage.length>0){
        this.size.wgPercentage = this.flattenData(this.wgPercentage)
        this.analysis.wgPercentage = this.flattenData(this.wgPercentage)

        this.wgPercentage = [];
      }

      if(this.flPercentage.length>0){
        this.size.flPercentage = this.flattenData(this.flPercentage);
        this.analysis.flPercentage = this.flattenData(this.flPercentage);

        this.flPercentage = [];
      }
    }

    // this.init5()
  },
  beforeDestroy(){
    this.intervalId = null
    // this.qtCall = null
  },
  watch: {
    selectMenu(val) {
      if (val === 1) {
        this.search(1)
      } else if (val === 2) {
        this.$nextTick(() => {
          this.init()
          if (process.env.NODE_ENV === 'production') {
            this.queryMain.type = 2
            this.queryMain.startTime = formatDate(this.queryMain.startTime)
            this.queryMain.endTime = formatDate(this.queryMain.endTime)
            this.qtCall.JsToQt("NeedQueryHistoryInQualityAnalysis", this.queryMain);//可以传给qt
            this.qtCall.QtToJs.connect((func, json) => {
              if(func === 'RefreshHistoryInDefectTypeQualityAnalysis'){
                const datas = JSON.parse(json)
                console.log('watch 接口返回 RefreshHistoryInDefectTypeQualityAnalysis', datas.data)
                if (datas.code === 200) {
                  this.defectCountAll = datas.data.countAll
                  this.getAnalysisType(datas)
                }
              }
            })
          }

        });
      } else if (val === 3) {
        this.$nextTick(() => {
          this.init2()
          if (process.env.NODE_ENV === 'production') {
            this.queryMain.type = 3
            this.queryMain.startTime = formatDate(this.queryMain.startTime)
            this.queryMain.endTime = formatDate(this.queryMain.endTime)
            this.qtCall.JsToQt("NeedQueryHistoryInQualityAnalysis", this.queryMain);//可以传给qt
            this.qtCall.QtToJs.connect((func, json) => {
              if(func === 'RefreshHistoryInDefectPositionQualityAnalysis'){
                const datas = JSON.parse(json)
                console.log('watch 接口返回 RefreshHistoryInDefectPositionQualityAnalysis', datas.data)
                if (datas.code === 200) {
                  this.defectCountAll = datas.data.countAll
                  this.getAnalysisTypeSize(datas)
                }
              }
            })
          }
        });
      }
      else if (val === 5) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.init5()
            this.search_quality_warn()
          }, 400);
        });
      }
      else {
        this.option = null
      }
    }
  },
  methods: {
    alarmSet(){
      this.qtCall.JsToQt("QualityWarnPlanSet", {});//可以传给qt
    },
    flattenData(data) {
      let flatData = [];
      let rowIndex = 0;
      console.log('flattendata', data)
      data.forEach((item) => {
        if (rowIndex > 4) {
          return;
        }
        const startRowIndex = rowIndex + 1;
        let needRowNumber = true;
        let item_num = 0
        item.data.forEach((subItem, subIndex) => {
          if (item_num > 2){
            return ;
          }
          flatData.push({
            rowNumber: needRowNumber ? startRowIndex : "", // 序号
            index: startRowIndex, // 使用开始行索引作为唯一标识
            name: subItem === item.data[0] ? item.name : "", // 只在第一行显示大项名称
            value: subItem === item.data[0] ? item.value : "", // 只在第一行显示大项数量
            percentage: subItem === item.data[0] ? item.percentage : "", // 只在第一行显示大项百分比
            dataName: subItem.name,
            dataValue: subItem.value,
            dataPercentage: subItem.percentage,
            dataPercentageAll: subItem.percentageAll,
            rowSpan: item.data.length, // 当前大项的行数
          });
          item_num++
          needRowNumber = false;
        });
        rowIndex++;
      });

      return flatData;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }, data) {
      const columnsToMerge = ['rowNumber', 'name', 'value', 'percentage']; // 需要合并的列名
      const currentProp = column.property;

      if (columnsToMerge.includes(currentProp)) {
        const flatRowIndex = row.index;
        const previousRow = rowIndex === 0 ? null : data[rowIndex - 1];
        let nextRow = rowIndex === data.length - 1 ? null : data[rowIndex + 1];

        // 如果前一行和当前行属于同一个大项
        if (previousRow && previousRow.index === flatRowIndex) {
          return [0, 0];
        }

        // 计算当前大项需要跨越的行数
        let rowspan = 1;
        let currentRowIndex = rowIndex; // 确保不会修改 rowIndex
        while (nextRow && nextRow.index === flatRowIndex) {
          rowspan++;
          currentRowIndex++;
          nextRow = currentRowIndex === data.length - 1 ? null : data[currentRowIndex + 1];
        }
        return [rowspan, 1];
      }
      return [1, 1];
    },
    exportData(childData = {}){
      let mode = -1;
      let types = [];
      let productOrDefect = ""
      if (childData.type !== "click") {
        console.log('导出数据', childData)
        this.queryMain = childData;
        this.selectMenu = childData.type
        mode = childData.mode
        types = childData.types
        productOrDefect = childData.productOrDefect
      }
      const data = {
        type:this.selectMenu+1,
        startTime: this.queryMain.startTime,
        endTime: this.queryMain.endTime,
        color: this.queryMain.color,
        productName: this.queryMain.productName,
        productOrDefect: productOrDefect !== "" ? productOrDefect : this.queryMain.productOrDefect,
        mode: mode,
        types: types
      }
      console.log("导出参数为： ", data)
      if (process.env.NODE_ENV === 'production') {
        this.qtCall.JsToQt("NeedExport", data);//可以传给qt
      }
    },
    updateStartDate(newStartDate) {
      if (newStartDate === null || newStartDate instanceof Date || typeof newStartDate === 'string') {
        this.queryMain.startTime = newStartDate ? new Date(newStartDate) : null;
      } else {
        console.error('Invalid startDate type:', newStartDate);
      }
    },
    updateEndDate(newEndDate) {
      if (newEndDate === null || newEndDate instanceof Date || typeof newEndDate === 'string') {
        this.queryMain.endTime = newEndDate ? new Date(newEndDate) : null;
      } else {
        console.error('Invalid startDate type:', newEndDate);
      }
    },
    updateColor(newColor) {
      this.queryMain.color = newColor;
    },
    updateProductName(newProductName) {
      this.queryMain.productName = newProductName;
    },
    setType(val,type){
      this.queryMain.productOrDefect = val
      this.queryMain.type = type
      this.search(type)
    },
    checkMenu(index) {
      this.selectMenu = index

    },
    search_quality_warn(){
      this.option5.series[0].data=[]
      console.log('质量预警统计图数据', this.option5.data)
      this.queryMain.type = 5
      this.queryMain.startTime = formatDate(this.queryMain.startTime)
      this.queryMain.endTime = formatDate(this.queryMain.endTime)

      console.log('质量预警传参',  this.queryMain)
      if (process.env.NODE_ENV === 'production') {
        this.qtCall.JsToQt("NeedQueryHistoryInQualityAnalysis", this.queryMain);
      }
    },
    getAnalysisType(datas){
      this.analysis = datas.data;
      this.analysis.flPercentage = this.flattenData(datas.data.flPercentage);
      this.analysis.wgPercentage = this.flattenData(datas.data.wgPercentage);
      this.analysis.wgtotal = datas.data.wgtotal
      this.analysis.fltotal = datas.data.fltotal

      this.analysis.wgOther = datas.data.otherWg;
      this.analysis.flOther = datas.data.otherFl;

      setTimeout(() => {
        this.init()
      }, 300);
    },
    getAnalysisTypeSize(datas){
      this.size = datas.data;
      this.size.flPercentage = this.flattenData(datas.data.flPercentage);
      this.size.wgPercentage = this.flattenData(datas.data.wgPercentage);
      this.size.wgtotal = datas.data.wgtotal
      this.size.fltotal = datas.data.fltotal

      setTimeout(() => {
        this.init2()
      }, 300);
    },
    search(type) {
      if(!this.queryMain.startTime&&this.queryMain.endTime){
        this.$message.error('请选择开始时间')
        return
      }
      if(this.queryMain.startTime&&!this.queryMain.endTime){
        this.$message.error('请选择结束时间')
        return
      }
      if (new Date(this.queryMain.startTime).getTime() > new Date(this.queryMain.endTime).getTime()) {
        this.$message.error('开始时间不能大于结束时间')
        return
      }

      if(this.queryMain.startTime&&this.queryMain.endTime){
        let yy = new Date(this.queryMain.startTime).getFullYear().toString();
        let mm = new Date(this.queryMain.startTime).getMonth() + 1;
        let dd = new Date(this.queryMain.startTime).getDate();
        let hh = new Date(this.queryMain.startTime).getHours();
        let mf = new Date(this.queryMain.startTime).getMinutes();
        let ss = new Date(this.queryMain.startTime).getSeconds();
        mm = mm < 10 ? '0' + mm.toString() : mm.toString()
        dd = dd < 10 ? '0' + dd.toString() : dd.toString()
        hh = hh < 10 ? '0' + hh.toString() : hh.toString()
        mf = mf < 10 ? '0' + mf.toString() : mf.toString()
        ss = ss < 10 ? '0' + ss.toString() : ss.toString()

        let yy1 = new Date(this.queryMain.endTime).getFullYear().toString();
        let mm1 = new Date(this.queryMain.endTime).getMonth() + 1;
        let dd1 = new Date(this.queryMain.endTime).getDate();
        let hh1 = new Date(this.queryMain.endTime).getHours();
        let mf1 = new Date(this.queryMain.endTime).getMinutes();
        let ss1 = new Date(this.queryMain.endTime).getSeconds();
        mm1 = mm1 < 10 ? '0' + mm1.toString() : mm1.toString()
        dd1 = dd1 < 10 ? '0' + dd1.toString() : dd1.toString()
        hh1 = hh1 < 10 ? '0' + hh1.toString() : hh1.toString()
        mf1 = mf1 < 10 ? '0' + mf1.toString() : mf1.toString()
        ss1 = ss1 < 10 ? '0' + ss1.toString() : ss1.toString()
        this.queryMain.startTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
        this.queryMain.endTime = yy1 + '-' + mm1 + '-' + dd1 + ' ' + hh1 + ':' + mf1 + ':' + ss1
      }

      if (process.env.NODE_ENV === 'production') {
        if(type===1){
          console.log(5)
          this.queryMain.type = 1
          this.qtCall.JsToQt("NeedQueryHistoryInQualityAnalysis", this.queryMain);//可以传给qt

          console.log("NeedQueryHistoryInQualityAnalysis传参", this.queryMain)
          this.qtCall.QtToJs.connect((func, json) => {
            if (func === "RefreshHistoryInIndexQualityAnalysis") {
              const datas = JSON.parse(json)
              if (datas.code === 200) {
                console.log('接口返回 RefreshHistoryInIndexQualityAnalysis' ,datas.data)
                var retData = datas.data
                if (retData.flDefectTop.length === 0&&retData.wgDefectTop.length==0) {
                  this.$message.closeAll();
                  this.$message.warning("没有查询到数据");
                }
                this.data = datas.data
                console.log(7)
                console.log(this.data)
                this.rateAllRate = parseFloat(this.data.totalData.addRateAll) > 0 ? true : false
                this.rateWgRate = parseFloat(this.data.totalData.addRateWg) > 0 ? true : false
                this.rateFlRate = parseFloat(this.data.totalData.addRateFl) > 0 ? true : false
              }
            }
          })
        }else if(type===2){
          this.queryMain.type = 2
          this.qtCall.JsToQt("NeedQueryHistoryInQualityAnalysis", this.queryMain);//可以传给qt
          this.qtCall.QtToJs.connect((func, json) => {
            if(func === 'RefreshHistoryInDefectTypeQualityAnalysis'){
              const datas = JSON.parse(json)
              if (datas.code === 200) {
                console.log('接口返回 RefreshHistoryInDefectTypeQualityAnalysis' ,datas.data)
                var retData = datas.data
                if (retData.flDefectTop.length === 0&&retData.wgDefectTop.length==0) {
                  this.$message.closeAll();
                  this.$message.warning("没有查询到数据");
                }
                this.defectCountAll = datas.data.countAll
                this.getAnalysisType(datas)
              }
            }
          })
        } else if(type===3){
          this.queryMain.type = 3
          this.qtCall.JsToQt("NeedQueryHistoryInQualityAnalysis", this.queryMain);//可以传给qt
          this.qtCall.QtToJs.connect((func, json) => {
            if(func === 'RefreshHistoryInDefectPositionQualityAnalysis'){
              const datas = JSON.parse(json)
              if (datas.code === 200) {
                console.log('接口返回 RefreshHistoryInDefectPositionQualityAnalysis' ,datas.data)
                var retData = datas.data
                if (retData.flTrend.length === 0 && retData.wgTrend.length === 0) {
                  this.$message.closeAll();
                  this.$message.warning("没有查询到数据");
                }
                this.defectCountAll = datas.data.countAll
                this.getAnalysisTypeSize(datas)
              }
            }
          })
        }
      } else {
        let data_type_2 = {}
        if (this.queryMain.productOrDefect == "defect") {
          data_type_2 = {
            "code": 200,
            "data": {
              "countAll": 2000,
              "flDefectTop": [
                {
                  "label": "辅料缺失-顶部小泡棉",
                  "value": "1.00"
                },
                {
                  "label": "辅料缺失-顶部麦拉",
                  "value": "1.00"
                },
                {
                  "label": "边透光/大背胶偏移",
                  "value": "9.00"
                },
                {
                  "label": "圆孔/方孔侧壁白点",
                  "value": "11.00"
                }
              ],
              "flPercentage": [
                {
                  "data": [
                    {
                      "name": "B3",
                      "percentage": "100.00",
                      "percentageAll": "50.00",
                      "value": 11
                    }
                  ],
                  "name": "圆孔/方孔侧壁白点",
                  "percentage": "50.00",
                  "value": 11
                },
                {
                  "data": [
                    {
                      "name": "B2",
                      "percentage": "77.78",
                      "percentageAll": "31.82",
                      "value": 7
                    },
                    {
                      "name": "B4",
                      "percentage": "11.11",
                      "percentageAll": "4.55",
                      "value": 1
                    },
                    {
                      "name": "B9",
                      "percentage": "11.11",
                      "percentageAll": "4.55",
                      "value": 1
                    }
                  ],
                  "name": "边透光/大背胶偏移",
                  "percentage": "40.91",
                  "value": 9
                },
                {
                  "data": [
                    {
                      "name": "B5",
                      "percentage": "100.00",
                      "percentageAll": "4.55",
                      "value": 1
                    }
                  ],
                  "name": "辅料缺失-顶部小泡棉",
                  "percentage": "4.55",
                  "value": 1
                },
                {
                  "data": [
                    {
                      "name": "B4",
                      "percentage": "100.00",
                      "percentageAll": "4.55",
                      "value": 1
                    }
                  ],
                  "name": "辅料缺失-顶部麦拉",
                  "percentage": "4.55",
                  "value": 1
                }
              ],
              "flTrend": [
                {
                  "data": [
                    {
                      "label": "圆孔/方孔侧壁白点",
                      "value": "11.00"
                    },
                    {
                      "label": "边透光/大背胶偏移",
                      "value": "9.00"
                    },
                    {
                      "label": "辅料缺失-顶部麦拉",
                      "value": "1.00"
                    },
                    {
                      "label": "辅料缺失-顶部小泡棉",
                      "value": "1.00"
                    }
                  ],
                  "dateTime": "8-7"
                }
              ],
              "fltotal": "22",
              "wgDefectTop": [
                {
                  "label": "闪光灯脏污/异色",
                  "value": "53.00"
                },
                {
                  "label": "装饰件侧壁擦伤/压伤",
                  "value": "79.00"
                },
                {
                  "label": "装饰环溢胶/夹胶",
                  "value": "93.00"
                },
                {
                  "label": "小A面擦伤",
                  "value": "99.00"
                },
                {
                  "label": "漏工艺-大字符缺失",
                  "value": "263.00"
                }
              ],
              "wgPercentage": [
                {
                  "data": [
                    {
                      "name": "null",
                      "percentage": "100.00",
                      "percentageAll": "28.19",
                      "value": 263
                    }
                  ],
                  "name": "漏工艺-大字符缺失",
                  "percentage": "28.19",
                  "value": 263
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "10.61",
                      "value": 99
                    }
                  ],
                  "name": "小A面擦伤",
                  "percentage": "10.61",
                  "value": 99
                },
                {
                  "data": [
                    {
                      "name": "C3",
                      "percentage": "54.84",
                      "percentageAll": "5.47",
                      "value": 51
                    },
                    {
                      "name": "C1",
                      "percentage": "30.11",
                      "percentageAll": "3.00",
                      "value": 28
                    },
                    {
                      "name": "C2",
                      "percentage": "15.05",
                      "percentageAll": "1.50",
                      "value": 14
                    }
                  ],
                  "name": "装饰环溢胶/夹胶",
                  "percentage": "9.97",
                  "value": 93
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "84.81",
                      "percentageAll": "7.18",
                      "value": 67
                    },
                    {
                      "name": "C1",
                      "percentage": "13.92",
                      "percentageAll": "1.18",
                      "value": 11
                    },
                    {
                      "name": "C3",
                      "percentage": "1.27",
                      "percentageAll": "0.11",
                      "value": 1
                    }
                  ],
                  "name": "装饰件侧壁擦伤/压伤",
                  "percentage": "8.47",
                  "value": 79
                },
                {
                  "data": [
                    {
                      "name": "C1",
                      "percentage": "58.49",
                      "percentageAll": "3.32",
                      "value": 31
                    },
                    {
                      "name": "C3",
                      "percentage": "26.42",
                      "percentageAll": "1.50",
                      "value": 14
                    },
                    {
                      "name": "C2",
                      "percentage": "15.09",
                      "percentageAll": "0.86",
                      "value": 8
                    }
                  ],
                  "name": "装饰环压伤",
                  "percentage": "5.68",
                  "value": 53
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "5.68",
                      "value": 53
                    }
                  ],
                  "name": "闪光灯脏污/异色",
                  "percentage": "5.68",
                  "value": 53
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "5.36",
                      "value": 50
                    }
                  ],
                  "name": "孔侧壁麻点",
                  "percentage": "5.36",
                  "value": 50
                },
                {
                  "data": [
                    {
                      "name": "C3",
                      "percentage": "79.55",
                      "percentageAll": "3.75",
                      "value": 35
                    },
                    {
                      "name": "C2",
                      "percentage": "15.91",
                      "percentageAll": "0.75",
                      "value": 7
                    },
                    {
                      "name": "C1",
                      "percentage": "4.55",
                      "percentageAll": "0.21",
                      "value": 2
                    }
                  ],
                  "name": "装饰环侧壁细划伤",
                  "percentage": "4.72",
                  "value": 44
                },
                {
                  "data": [
                    {
                      "name": "C1",
                      "percentage": "45.95",
                      "percentageAll": "1.82",
                      "value": 17
                    },
                    {
                      "name": "C3",
                      "percentage": "29.73",
                      "percentageAll": "1.18",
                      "value": 11
                    },
                    {
                      "name": "C2",
                      "percentage": "24.32",
                      "percentageAll": "0.96",
                      "value": 9
                    }
                  ],
                  "name": "装饰环侧壁擦伤/压伤",
                  "percentage": "3.97",
                  "value": 37
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "3.75",
                      "value": 35
                    }
                  ],
                  "name": "孔侧壁异色",
                  "percentage": "3.75",
                  "value": 35
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "2.47",
                      "value": 23
                    }
                  ],
                  "name": "小A面细划伤",
                  "percentage": "2.47",
                  "value": 23
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "1.61",
                      "value": 15
                    }
                  ],
                  "name": "圆孔/方孔侧壁白点",
                  "percentage": "1.61",
                  "value": 15
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "1.61",
                      "value": 15
                    }
                  ],
                  "name": "装饰件侧壁划伤",
                  "percentage": "1.61",
                  "value": 15
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "1.50",
                      "value": 14
                    }
                  ],
                  "name": "装饰件溢胶/夹胶",
                  "percentage": "1.50",
                  "value": 14
                },
                {
                  "data": [
                    {
                      "name": "C1",
                      "percentage": "100.00",
                      "percentageAll": "1.07",
                      "value": 10
                    }
                  ],
                  "name": "漏工艺-混环",
                  "percentage": "1.07",
                  "value": 10
                },
                {
                  "data": [
                    {
                      "name": "C3",
                      "percentage": "55.56",
                      "percentageAll": "0.54",
                      "value": 5
                    },
                    {
                      "name": "C1",
                      "percentage": "33.33",
                      "percentageAll": "0.32",
                      "value": 3
                    },
                    {
                      "name": "C2",
                      "percentage": "11.11",
                      "percentageAll": "0.11",
                      "value": 1
                    }
                  ],
                  "name": "装饰环划伤",
                  "percentage": "0.96",
                  "value": 9
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.64",
                      "value": 6
                    }
                  ],
                  "name": "镜片白点",
                  "percentage": "0.64",
                  "value": 6
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.54",
                      "value": 5
                    }
                  ],
                  "name": "小A面硬划伤",
                  "percentage": "0.54",
                  "value": 5
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.54",
                      "value": 5
                    }
                  ],
                  "name": "板材崩边",
                  "percentage": "0.54",
                  "value": 5
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.54",
                      "value": 5
                    }
                  ],
                  "name": "板材擦伤/压伤",
                  "percentage": "0.54",
                  "value": 5
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.43",
                      "value": 4
                    }
                  ],
                  "name": "板材硬划伤",
                  "percentage": "0.43",
                  "value": 4
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.43",
                      "value": 4
                    }
                  ],
                  "name": "装饰件侧壁细划伤",
                  "percentage": "0.43",
                  "value": 4
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.32",
                      "value": 3
                    }
                  ],
                  "name": "镜片划伤",
                  "percentage": "0.32",
                  "value": 3
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.32",
                      "value": 3
                    }
                  ],
                  "name": "镜片异色",
                  "percentage": "0.32",
                  "value": 3
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.21",
                      "value": 2
                    }
                  ],
                  "name": "圆孔/方孔侧壁脏污",
                  "percentage": "0.21",
                  "value": 2
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.11",
                      "value": 1
                    }
                  ],
                  "name": "孔侧壁划伤",
                  "percentage": "0.11",
                  "value": 1
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.11",
                      "value": 1
                    }
                  ],
                  "name": "小A面压伤",
                  "percentage": "0.11",
                  "value": 1
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.11",
                      "value": 1
                    }
                  ],
                  "name": "板材细划伤",
                  "percentage": "0.11",
                  "value": 1
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.11",
                      "value": 1
                    }
                  ],
                  "name": "镜片亮点",
                  "percentage": "0.11",
                  "value": 1
                }
              ],
              "wgTrend": [
                {
                  "data": [
                    {
                      "label": "漏工艺-大字符缺失",
                      "value": "263.00"
                    },
                    {
                      "label": "小A面擦伤",
                      "value": "99.00"
                    },
                    {
                      "label": "装饰环溢胶/夹胶",
                      "value": "93.00"
                    },
                    {
                      "label": "装饰件侧壁擦伤/压伤",
                      "value": "79.00"
                    },
                    {
                      "label": "闪光灯脏污/异色",
                      "value": "53.00"
                    },
                    {
                      "label": "圆孔/方孔侧壁白点",
                      "value": "15.00"
                    }
                  ],
                  "dateTime": "8-7"
                }
              ],
              "wgtotal": "933"
            },
            "msg": ""
          }
        } else {
          data_type_2 = {
            "code": 200,
            "data": {
              "countAll": 2000,
              "flDefectTop": [
                {
                  "label": "其它",
                  "value": "44678.00"
                },
                {
                  "label": "Test_5",
                  "value": "11101.00"
                },
                {
                  "label": "Test_6",
                  "value": "11101.00"
                },
                {
                  "label": "Test_9",
                  "value": "11101.00"
                },
                {
                  "label": "Test_8",
                  "value": "11101.00"
                },
                {
                  "label": "Test_7",
                  "value": "11101.00"
                }
              ],
              "flPercentage": [
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "99.99",
                      "percentageAll": "11.01",
                      "value": 11100
                    },
                    {
                      "name": "E1",
                      "percentage": "0.01",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "Test_1",
                  "percentage": "11.01",
                  "value": 11101
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "11.01",
                      "value": 11101
                    }
                  ],
                  "name": "Test_2",
                  "percentage": "11.01",
                  "value": 11101
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "11.01",
                      "value": 11101
                    }
                  ],
                  "name": "Test_3",
                  "percentage": "11.01",
                  "value": 11101
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "11.01",
                      "value": 11101
                    }
                  ],
                  "name": "Test_4",
                  "percentage": "11.01",
                  "value": 11101
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "11.01",
                      "value": 11101
                    }
                  ],
                  "name": "Test_5",
                  "percentage": "11.01",
                  "value": 11101
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "11.01",
                      "value": 11101
                    }
                  ],
                  "name": "Test_6",
                  "percentage": "11.01",
                  "value": 11101
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "11.01",
                      "value": 11101
                    }
                  ],
                  "name": "Test_7",
                  "percentage": "11.01",
                  "value": 11101
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "11.01",
                      "value": 11101
                    }
                  ],
                  "name": "Test_8",
                  "percentage": "11.01",
                  "value": 11101
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "11.01",
                      "value": 11101
                    }
                  ],
                  "name": "Test_9",
                  "percentage": "11.01",
                  "value": 11101
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "0.27",
                      "value": 274
                    }
                  ],
                  "name": "边透光",
                  "percentage": "0.27",
                  "value": 274
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "0.19",
                      "value": 193
                    }
                  ],
                  "name": "辅料不良",
                  "percentage": "0.19",
                  "value": 193
                },
                {
                  "data": [
                    {
                      "name": "B3",
                      "percentage": "100.00",
                      "percentageAll": "0.15",
                      "value": 154
                    }
                  ],
                  "name": "孔内异色",
                  "percentage": "0.15",
                  "value": 154
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "0.13",
                      "value": 128
                    }
                  ],
                  "name": "麦拉缺失",
                  "percentage": "0.13",
                  "value": 128
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "0.05",
                      "value": 52
                    }
                  ],
                  "name": "背胶缺失",
                  "percentage": "0.05",
                  "value": 52
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "0.03",
                      "value": 29
                    }
                  ],
                  "name": "泡棉缺失",
                  "percentage": "0.03",
                  "value": 29
                },
                {
                  "data": [
                    {
                      "name": "B2",
                      "percentage": "85.71",
                      "percentageAll": "0.02",
                      "value": 18
                    },
                    {
                      "name": "B9",
                      "percentage": "9.52",
                      "percentageAll": "0.00",
                      "value": 2
                    },
                    {
                      "name": "B4",
                      "percentage": "4.76",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "边透光/大背胶偏移",
                  "percentage": "0.02",
                  "value": 21
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "0.02",
                      "value": 16
                    }
                  ],
                  "name": "辅料缺失-两侧麦拉",
                  "percentage": "0.02",
                  "value": 16
                },
                {
                  "data": [
                    {
                      "name": "B3",
                      "percentage": "100.00",
                      "percentageAll": "0.01",
                      "value": 12
                    }
                  ],
                  "name": "圆孔/方孔侧壁白点",
                  "percentage": "0.01",
                  "value": 12
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "0.01",
                      "value": 8
                    }
                  ],
                  "name": "闪光孔膜缺失",
                  "percentage": "0.01",
                  "value": 8
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "0.00",
                      "value": 5
                    }
                  ],
                  "name": "麦拉偏移",
                  "percentage": "0.00",
                  "value": 5
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "0.00",
                      "value": 3
                    }
                  ],
                  "name": "防水标缺失",
                  "percentage": "0.00",
                  "value": 3
                },
                {
                  "data": [
                    {
                      "name": "B4",
                      "percentage": "100.00",
                      "percentageAll": "0.00",
                      "value": 2
                    }
                  ],
                  "name": "辅料缺失-顶部麦拉",
                  "percentage": "0.00",
                  "value": 2
                },
                {
                  "data": [
                    {
                      "name": "B5",
                      "percentage": "100.00",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "辅料缺失-顶部小泡棉",
                  "percentage": "0.00",
                  "value": 1
                },
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "防水标发红",
                  "percentage": "0.00",
                  "value": 1
                }
              ],
              "flTrend": [
                {
                  "data": [
                    {
                      "label": "边透光",
                      "value": "258.00"
                    },
                    {
                      "label": "Test_1",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_3",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_5",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_8",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_4",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_7",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_2",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_6",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_9",
                      "value": "0.00"
                    }
                  ],
                  "dateTime": "8-3"
                },
                {
                  "data": [
                    {
                      "label": "Test_5",
                      "value": "11097.00"
                    },
                    {
                      "label": "Test_7",
                      "value": "11097.00"
                    },
                    {
                      "label": "Test_9",
                      "value": "11097.00"
                    },
                    {
                      "label": "Test_8",
                      "value": "11097.00"
                    },
                    {
                      "label": "Test_6",
                      "value": "11097.00"
                    },
                    {
                      "label": "Test_1",
                      "value": "11097.00"
                    },
                    {
                      "label": "Test_2",
                      "value": "11097.00"
                    },
                    {
                      "label": "Test_3",
                      "value": "11097.00"
                    },
                    {
                      "label": "Test_4",
                      "value": "11097.00"
                    },
                    {
                      "label": "边透光",
                      "value": "0.00"
                    }
                  ],
                  "dateTime": "8-4"
                },
                {
                  "data": [
                    {
                      "label": "边透光",
                      "value": "16.00"
                    },
                    {
                      "label": "Test_1",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_3",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_5",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_8",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_4",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_7",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_2",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_6",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_9",
                      "value": "0.00"
                    }
                  ],
                  "dateTime": "8-5"
                },
                {
                  "data": [
                    {
                      "label": "Test_5",
                      "value": "4.00"
                    },
                    {
                      "label": "Test_7",
                      "value": "4.00"
                    },
                    {
                      "label": "Test_9",
                      "value": "4.00"
                    },
                    {
                      "label": "Test_8",
                      "value": "4.00"
                    },
                    {
                      "label": "Test_6",
                      "value": "4.00"
                    },
                    {
                      "label": "Test_1",
                      "value": "4.00"
                    },
                    {
                      "label": "Test_2",
                      "value": "4.00"
                    },
                    {
                      "label": "Test_3",
                      "value": "4.00"
                    },
                    {
                      "label": "Test_4",
                      "value": "4.00"
                    },
                    {
                      "label": "边透光",
                      "value": "0.00"
                    }
                  ],
                  "dateTime": "8-6"
                },
                {
                  "data": [
                    {
                      "label": "Test_8",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_1",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_5",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_3",
                      "value": "0.00"
                    },
                    {
                      "label": "边透光",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_2",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_4",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_9",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_7",
                      "value": "0.00"
                    },
                    {
                      "label": "Test_6",
                      "value": "0.00"
                    }
                  ],
                  "dateTime": "8-7"
                }
              ],
              "fltotal": "100808",
              "otherFl": [
                {
                  "label": "边透光",
                  "value": "274.00"
                },
                {
                  "label": "Test_3",
                  "value": "11101.00"
                },
                {
                  "label": "Test_1",
                  "value": "11101.00"
                },
                {
                  "label": "Test_2",
                  "value": "11101.00"
                },
                {
                  "label": "Test_4",
                  "value": "11101.00"
                },
                {
                  "label": "镜片白点",
                  "value": "1209.00"
                },
                {
                  "label": "装饰件、环缺陷",
                  "value": "1097.00"
                },
                {
                  "label": "装饰环侧壁三伤",
                  "value": "918.00"
                },
                {
                  "label": "小A面三伤",
                  "value": "806.00"
                },
                {
                  "label": "板材三伤",
                  "value": "683.00"
                }
              ],
              "otherWg": [
                {
                  "label": "镜片白点",
                  "value": "1209.00"
                },
                {
                  "label": "装饰件、环缺陷",
                  "value": "1097.00"
                },
                {
                  "label": "装饰环侧壁三伤",
                  "value": "918.00"
                },
                {
                  "label": "小A面三伤",
                  "value": "806.00"
                },
                {
                  "label": "板材三伤",
                  "value": "683.00"
                }
              ],
              "wgDefectTop": [
                {
                  "label": "其它",
                  "value": "4713.00"
                },
                {
                  "label": "装饰环三伤",
                  "value": "1264.00"
                },
                {
                  "label": "装饰件侧壁三伤",
                  "value": "1404.00"
                },
                {
                  "label": "装饰环侧壁溢胶",
                  "value": "2055.00"
                },
                {
                  "label": "孔内壁不良",
                  "value": "3152.00"
                },
                {
                  "label": "镜片白点",
                  "value": "11101.00"
                }
              ],
              "wgPercentage": [
                {
                  "data": [
                    {
                      "name": "",
                      "percentage": "100.00",
                      "percentageAll": "40.44",
                      "value": 11101
                    }
                  ],
                  "name": "镜片白点",
                  "percentage": "40.44",
                  "value": 11101
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "11.48",
                      "value": 3152
                    }
                  ],
                  "name": "孔内壁不良",
                  "percentage": "11.48",
                  "value": 3152
                },
                {
                  "data": [
                    {
                      "name": "C3",
                      "percentage": "43.45",
                      "percentageAll": "3.25",
                      "value": 893
                    },
                    {
                      "name": "C2",
                      "percentage": "40.54",
                      "percentageAll": "3.03",
                      "value": 833
                    },
                    {
                      "name": "C1",
                      "percentage": "16.01",
                      "percentageAll": "1.20",
                      "value": 329
                    }
                  ],
                  "name": "装饰环侧壁溢胶",
                  "percentage": "7.49",
                  "value": 2055
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "5.12",
                      "value": 1404
                    }
                  ],
                  "name": "装饰件侧壁三伤",
                  "percentage": "5.12",
                  "value": 1404
                },
                {
                  "data": [
                    {
                      "name": "C3",
                      "percentage": "49.76",
                      "percentageAll": "2.29",
                      "value": 629
                    },
                    {
                      "name": "C1",
                      "percentage": "32.75",
                      "percentageAll": "1.51",
                      "value": 414
                    },
                    {
                      "name": "C2",
                      "percentage": "17.48",
                      "percentageAll": "0.81",
                      "value": 221
                    }
                  ],
                  "name": "装饰环三伤",
                  "percentage": "4.61",
                  "value": 1264
                },
                {
                  "data": [
                    {
                      "name": "C1",
                      "percentage": "66.25",
                      "percentageAll": "2.92",
                      "value": 801
                    },
                    {
                      "name": "C3",
                      "percentage": "28.21",
                      "percentageAll": "1.24",
                      "value": 341
                    },
                    {
                      "name": "C2",
                      "percentage": "5.54",
                      "percentageAll": "0.24",
                      "value": 67
                    }
                  ],
                  "name": "镜片白点",
                  "percentage": "4.40",
                  "value": 1209
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "45.94",
                      "percentageAll": "1.84",
                      "value": 504
                    },
                    {
                      "name": "C1",
                      "percentage": "35.00",
                      "percentageAll": "1.40",
                      "value": 384
                    },
                    {
                      "name": "C3",
                      "percentage": "19.05",
                      "percentageAll": "0.76",
                      "value": 209
                    }
                  ],
                  "name": "装饰件、环缺陷",
                  "percentage": "4.00",
                  "value": 1097
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "39.65",
                      "percentageAll": "1.33",
                      "value": 364
                    },
                    {
                      "name": "C3",
                      "percentage": "34.42",
                      "percentageAll": "1.15",
                      "value": 316
                    },
                    {
                      "name": "C1",
                      "percentage": "25.93",
                      "percentageAll": "0.87",
                      "value": 238
                    }
                  ],
                  "name": "装饰环侧壁三伤",
                  "percentage": "3.34",
                  "value": 918
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "2.94",
                      "value": 806
                    }
                  ],
                  "name": "小A面三伤",
                  "percentage": "2.94",
                  "value": 806
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "2.49",
                      "value": 683
                    }
                  ],
                  "name": "板材三伤",
                  "percentage": "2.49",
                  "value": 683
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "93.29",
                      "percentageAll": "1.47",
                      "value": 403
                    },
                    {
                      "name": "A8",
                      "percentage": "6.71",
                      "percentageAll": "0.11",
                      "value": 29
                    }
                  ],
                  "name": "装饰件侧壁溢胶",
                  "percentage": "1.57",
                  "value": 432
                },
                {
                  "data": [
                    {
                      "name": "A8",
                      "percentage": "100.00",
                      "percentageAll": "1.44",
                      "value": 395
                    }
                  ],
                  "name": "CG大面缺陷",
                  "percentage": "1.44",
                  "value": 395
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "34.76",
                      "percentageAll": "0.44",
                      "value": 122
                    },
                    {
                      "name": "C1",
                      "percentage": "33.90",
                      "percentageAll": "0.43",
                      "value": 119
                    },
                    {
                      "name": "C3",
                      "percentage": "31.34",
                      "percentageAll": "0.40",
                      "value": 110
                    }
                  ],
                  "name": "装饰环溢胶/夹胶",
                  "percentage": "1.28",
                  "value": 351
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "65.20",
                      "percentageAll": "0.81",
                      "value": 223
                    },
                    {
                      "name": "C1",
                      "percentage": "21.35",
                      "percentageAll": "0.27",
                      "value": 73
                    },
                    {
                      "name": "C3",
                      "percentage": "13.45",
                      "percentageAll": "0.17",
                      "value": 46
                    }
                  ],
                  "name": "镜片异色",
                  "percentage": "1.25",
                  "value": 342
                },
                {
                  "data": [
                    {
                      "name": "null",
                      "percentage": "100.00",
                      "percentageAll": "0.96",
                      "value": 263
                    }
                  ],
                  "name": "漏工艺-大字符缺失",
                  "percentage": "0.96",
                  "value": 263
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "62.73",
                      "percentageAll": "0.50",
                      "value": 138
                    },
                    {
                      "name": "C1",
                      "percentage": "19.55",
                      "percentageAll": "0.16",
                      "value": 43
                    },
                    {
                      "name": "C2",
                      "percentage": "17.27",
                      "percentageAll": "0.14",
                      "value": 38
                    },
                    {
                      "name": "C3",
                      "percentage": "0.45",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "装饰件侧壁擦伤/压伤",
                  "percentage": "0.80",
                  "value": 220
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.77",
                      "value": 210
                    }
                  ],
                  "name": "闪光灯不良",
                  "percentage": "0.77",
                  "value": 210
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.56",
                      "value": 153
                    }
                  ],
                  "name": "小A面擦伤",
                  "percentage": "0.56",
                  "value": 153
                },
                {
                  "data": [
                    {
                      "name": "C1",
                      "percentage": "40.67",
                      "percentageAll": "0.22",
                      "value": 61
                    },
                    {
                      "name": "C2",
                      "percentage": "38.67",
                      "percentageAll": "0.21",
                      "value": 58
                    },
                    {
                      "name": "C3",
                      "percentage": "20.67",
                      "percentageAll": "0.11",
                      "value": 31
                    }
                  ],
                  "name": "装饰环缺陷",
                  "percentage": "0.55",
                  "value": 150
                },
                {
                  "data": [
                    {
                      "name": "C1",
                      "percentage": "100.00",
                      "percentageAll": "0.52",
                      "value": 144
                    }
                  ],
                  "name": "混环检测",
                  "percentage": "0.52",
                  "value": 144
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.47",
                      "value": 129
                    }
                  ],
                  "name": "板材异色",
                  "percentage": "0.47",
                  "value": 129
                },
                {
                  "data": [
                    {
                      "name": "C1",
                      "percentage": "78.45",
                      "percentageAll": "0.33",
                      "value": 91
                    },
                    {
                      "name": "C3",
                      "percentage": "14.66",
                      "percentageAll": "0.06",
                      "value": 17
                    },
                    {
                      "name": "C2",
                      "percentage": "6.90",
                      "percentageAll": "0.03",
                      "value": 8
                    }
                  ],
                  "name": "装饰环压伤",
                  "percentage": "0.42",
                  "value": 116
                },
                {
                  "data": [
                    {
                      "name": "C3",
                      "percentage": "60.22",
                      "percentageAll": "0.20",
                      "value": 56
                    },
                    {
                      "name": "C2",
                      "percentage": "34.41",
                      "percentageAll": "0.12",
                      "value": 32
                    },
                    {
                      "name": "C1",
                      "percentage": "5.38",
                      "percentageAll": "0.02",
                      "value": 5
                    }
                  ],
                  "name": "装饰环侧壁细划伤",
                  "percentage": "0.34",
                  "value": 93
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.31",
                      "value": 86
                    }
                  ],
                  "name": "孔侧壁麻点",
                  "percentage": "0.31",
                  "value": 86
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.31",
                      "value": 84
                    }
                  ],
                  "name": "闪光灯脏污/异色",
                  "percentage": "0.31",
                  "value": 84
                },
                {
                  "data": [
                    {
                      "name": "A8",
                      "percentage": "64.18",
                      "percentageAll": "0.16",
                      "value": 43
                    },
                    {
                      "name": "A6",
                      "percentage": "35.82",
                      "percentageAll": "0.09",
                      "value": 24
                    }
                  ],
                  "name": "LOGO三伤",
                  "percentage": "0.24",
                  "value": 67
                },
                {
                  "data": [
                    {
                      "name": "C1",
                      "percentage": "53.03",
                      "percentageAll": "0.13",
                      "value": 35
                    },
                    {
                      "name": "C2",
                      "percentage": "24.24",
                      "percentageAll": "0.06",
                      "value": 16
                    },
                    {
                      "name": "C3",
                      "percentage": "22.73",
                      "percentageAll": "0.05",
                      "value": 15
                    }
                  ],
                  "name": "装饰环侧壁擦伤/压伤",
                  "percentage": "0.24",
                  "value": 66
                },
                {
                  "data": [
                    {
                      "name": "null",
                      "percentage": "100.00",
                      "percentageAll": "0.23",
                      "value": 63
                    }
                  ],
                  "name": "背胶偏移",
                  "percentage": "0.23",
                  "value": 63
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.20",
                      "value": 56
                    }
                  ],
                  "name": "孔侧壁异色",
                  "percentage": "0.20",
                  "value": 56
                },
                {
                  "data": [
                    {
                      "name": "null",
                      "percentage": "90.74",
                      "percentageAll": "0.18",
                      "value": 49
                    },
                    {
                      "name": "D1",
                      "percentage": "9.26",
                      "percentageAll": "0.02",
                      "value": 5
                    }
                  ],
                  "name": "板材崩边",
                  "percentage": "0.20",
                  "value": 54
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "95.00",
                      "percentageAll": "0.14",
                      "value": 38
                    },
                    {
                      "name": "C3",
                      "percentage": "2.50",
                      "percentageAll": "0.00",
                      "value": 1
                    },
                    {
                      "name": "null",
                      "percentage": "2.50",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "Other",
                  "percentage": "0.15",
                  "value": 40
                },
                {
                  "data": [
                    {
                      "name": "A8",
                      "percentage": "100.00",
                      "percentageAll": "0.13",
                      "value": 35
                    }
                  ],
                  "name": "CG三伤",
                  "percentage": "0.13",
                  "value": 35
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.12",
                      "value": 33
                    }
                  ],
                  "name": "小A面细划伤",
                  "percentage": "0.12",
                  "value": 33
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "55.17",
                      "percentageAll": "0.06",
                      "value": 16
                    },
                    {
                      "name": "C1",
                      "percentage": "31.03",
                      "percentageAll": "0.03",
                      "value": 9
                    },
                    {
                      "name": "C3",
                      "percentage": "13.79",
                      "percentageAll": "0.01",
                      "value": 4
                    }
                  ],
                  "name": "镜片三伤",
                  "percentage": "0.11",
                  "value": 29
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "55.00",
                      "percentageAll": "0.04",
                      "value": 11
                    },
                    {
                      "name": "C1",
                      "percentage": "35.00",
                      "percentageAll": "0.03",
                      "value": 7
                    },
                    {
                      "name": "C3",
                      "percentage": "10.00",
                      "percentageAll": "0.01",
                      "value": 2
                    }
                  ],
                  "name": "镜面膜缺失",
                  "percentage": "0.07",
                  "value": 20
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "88.24",
                      "percentageAll": "0.05",
                      "value": 15
                    },
                    {
                      "name": "B3",
                      "percentage": "11.76",
                      "percentageAll": "0.01",
                      "value": 2
                    }
                  ],
                  "name": "圆孔/方孔侧壁白点",
                  "percentage": "0.06",
                  "value": 17
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.06",
                      "value": 17
                    }
                  ],
                  "name": "装饰件侧壁划伤",
                  "percentage": "0.06",
                  "value": 17
                },
                {
                  "data": [
                    {
                      "name": "C1",
                      "percentage": "100.00",
                      "percentageAll": "0.06",
                      "value": 16
                    }
                  ],
                  "name": "漏工艺-混环",
                  "percentage": "0.06",
                  "value": 16
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.05",
                      "value": 15
                    }
                  ],
                  "name": "装饰件溢胶/夹胶",
                  "percentage": "0.05",
                  "value": 15
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.04",
                      "value": 10
                    }
                  ],
                  "name": "装饰件侧壁细划伤",
                  "percentage": "0.04",
                  "value": 10
                },
                {
                  "data": [
                    {
                      "name": "C3",
                      "percentage": "55.56",
                      "percentageAll": "0.02",
                      "value": 5
                    },
                    {
                      "name": "C1",
                      "percentage": "33.33",
                      "percentageAll": "0.01",
                      "value": 3
                    },
                    {
                      "name": "C2",
                      "percentage": "11.11",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "装饰环划伤",
                  "percentage": "0.03",
                  "value": 9
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.03",
                      "value": 8
                    }
                  ],
                  "name": "小A面硬划伤",
                  "percentage": "0.03",
                  "value": 8
                },
                {
                  "data": [
                    {
                      "name": "A8",
                      "percentage": "100.00",
                      "percentageAll": "0.03",
                      "value": 8
                    }
                  ],
                  "name": "CG异色",
                  "percentage": "0.03",
                  "value": 8
                },
                {
                  "data": [
                    {
                      "name": "null",
                      "percentage": "100.00",
                      "percentageAll": "0.03",
                      "value": 7
                    }
                  ],
                  "name": "小LOGO缺陷",
                  "percentage": "0.03",
                  "value": 7
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.02",
                      "value": 6
                    }
                  ],
                  "name": "板材擦伤/压伤",
                  "percentage": "0.02",
                  "value": 6
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.01",
                      "value": 4
                    }
                  ],
                  "name": "板材硬划伤",
                  "percentage": "0.01",
                  "value": 4
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.01",
                      "value": 3
                    }
                  ],
                  "name": "镜片划伤",
                  "percentage": "0.01",
                  "value": 3
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.01",
                      "value": 2
                    }
                  ],
                  "name": "圆孔/方孔侧壁脏污",
                  "percentage": "0.01",
                  "value": 2
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "小A面压伤",
                  "percentage": "0.00",
                  "value": 1
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "孔侧壁划伤",
                  "percentage": "0.00",
                  "value": 1
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "装饰环底部不良",
                  "percentage": "0.00",
                  "value": 1
                },
                {
                  "data": [
                    {
                      "name": "C2",
                      "percentage": "100.00",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "镜片亮点",
                  "percentage": "0.00",
                  "value": 1
                },
                {
                  "data": [
                    {
                      "name": "D1",
                      "percentage": "100.00",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "板材细划伤",
                  "percentage": "0.00",
                  "value": 1
                },
                {
                  "data": [
                    {
                      "name": "null",
                      "percentage": "100.00",
                      "percentageAll": "0.00",
                      "value": 1
                    }
                  ],
                  "name": "镜片脏污",
                  "percentage": "0.00",
                  "value": 1
                }
              ],
              "wgTrend": [
                {
                  "data": [
                    {
                      "label": "孔内壁不良",
                      "value": "3133.00"
                    },
                    {
                      "label": "装饰环侧壁溢胶",
                      "value": "2049.00"
                    },
                    {
                      "label": "装饰件侧壁三伤",
                      "value": "1399.00"
                    },
                    {
                      "label": "装饰环三伤",
                      "value": "1262.00"
                    },
                    {
                      "label": "镜片白点",
                      "value": "1184.00"
                    },
                    {
                      "label": "装饰件、环缺陷",
                      "value": "1097.00"
                    },
                    {
                      "label": "装饰环侧壁三伤",
                      "value": "917.00"
                    },
                    {
                      "label": "小A面三伤",
                      "value": "805.00"
                    },
                    {
                      "label": "板材三伤",
                      "value": "682.00"
                    },
                    {
                      "label": "镜片白点",
                      "value": "0.00"
                    }
                  ],
                  "dateTime": "8-3"
                },
                {
                  "data": [
                    {
                      "label": "镜片白点",
                      "value": "11097.00"
                    },
                    {
                      "label": "板材三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰环三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰环侧壁溢胶",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰件侧壁三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "孔内壁不良",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰环侧壁三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "小A面三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰件、环缺陷",
                      "value": "0.00"
                    },
                    {
                      "label": "镜片白点",
                      "value": "0.00"
                    }
                  ],
                  "dateTime": "8-4"
                },
                {
                  "data": [
                    {
                      "label": "孔内壁不良",
                      "value": "19.00"
                    },
                    {
                      "label": "镜片白点",
                      "value": "7.00"
                    },
                    {
                      "label": "装饰环侧壁溢胶",
                      "value": "6.00"
                    },
                    {
                      "label": "装饰件侧壁三伤",
                      "value": "5.00"
                    },
                    {
                      "label": "装饰环三伤",
                      "value": "2.00"
                    },
                    {
                      "label": "装饰环侧壁三伤",
                      "value": "1.00"
                    },
                    {
                      "label": "板材三伤",
                      "value": "1.00"
                    },
                    {
                      "label": "小A面三伤",
                      "value": "1.00"
                    },
                    {
                      "label": "镜片白点",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰件、环缺陷",
                      "value": "0.00"
                    }
                  ],
                  "dateTime": "8-5"
                },
                {
                  "data": [
                    {
                      "label": "镜片白点",
                      "value": "4.00"
                    },
                    {
                      "label": "板材三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰环三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰环侧壁溢胶",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰件侧壁三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "孔内壁不良",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰环侧壁三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "小A面三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰件、环缺陷",
                      "value": "0.00"
                    },
                    {
                      "label": "镜片白点",
                      "value": "0.00"
                    }
                  ],
                  "dateTime": "8-6"
                },
                {
                  "data": [
                    {
                      "label": "镜片白点",
                      "value": "18.00"
                    },
                    {
                      "label": "板材三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰环三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰环侧壁溢胶",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰件侧壁三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "孔内壁不良",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰环侧壁三伤",
                      "value": "0.00"
                    },
                    {
                      "label": "镜片白点",
                      "value": "0.00"
                    },
                    {
                      "label": "装饰件、环缺陷",
                      "value": "0.00"
                    },
                    {
                      "label": "小A面三伤",
                      "value": "0.00"
                    }
                  ],
                  "dateTime": "8-7"
                }
              ],
              "wgtotal": "27448"
            },
            "msg": ""
          };
        }
        this.defectCountAll = data_type_2.data.countAll
        this.getAnalysisType(data_type_2)
        this.getAnalysisTypeSize(data_type_2)
      }
    },

    init2(){
      if(this.selectMenu!==3){
        return
      }
      const chartDom7 = document.getElementById('echarts7');
      const myChart7 = echarts.init(chartDom7);
      const chartDom8 = document.getElementById('echarts8');
      const myChart8 = echarts.init(chartDom8);
      const wgTrendTime = []
      const wgTrendLegend = []
      const flTrendTime = []
      const flTrendLegend = []
      const defectCountAll = this.defectCountAll;

      const wgtotal = this.size.wgtotal;
      const fltotal = this.size.fltotal;

      for (var k = 0; k < this.size.wgTrend.length; k++) {
        wgTrendTime.push(this.size.wgTrend[k].dateTime)
        if (k === 0) {
          for (var m = 0; m < this.size.wgTrend[0].data.length; m++) {
            wgTrendLegend.push(this.size.wgTrend[0].data[m].label)
          }
        }
      }
      for (var b = 0; b < this.size.flTrend.length; b++) {
        flTrendTime.push(this.size.flTrend[b].dateTime)
        if (b === 0) {
          for (var p = 0; p < this.size.flTrend[0].data.length; p++) {
            flTrendLegend.push(this.size.flTrend[0].data[p].label)
          }
        }
      }
      const transformedWgTrend = this.size.wgTrend.reduce((acc, item) => {
        item.data.forEach((subItem) => {
          const index = acc.findIndex(
            (obj) => obj.name === subItem.label
          );
          if (index !== -1) {
            acc[index].data.push(subItem.value);
          } else {
            acc.push({
              name: subItem.label,
              type: "line",
              data: [subItem.value],
              color: this.fixedColors[acc.length % this.fixedColors.length],
            });
          }
        });
        return acc;
      }, []);

      const fltransformedWgTrend = this.size.flTrend.reduce((acc, item) => {
        item.data.forEach((subItem) => {
          const index = acc.findIndex(
            (obj) => obj.name === subItem.label
          );
          if (index !== -1) {
            acc[index].data.push(subItem.value);
          } else {
            acc.push({
              name: subItem.label,
              type: "line",
              data: [subItem.value],
              color: this.fixedColors[acc.length % this.fixedColors.length],
            });
          }
        });
        return acc;
      }, []);

      this.option7 = {
        tooltip: {
          order: 'valueDesc',
          trigger: 'axis',
          z: 9999,
          formatter: params => {
            const axisLabel = params[0].name;
            let total_num = 0;

            // 处理 tooltip 显示内容
            const tooltipContent = params.map((item, index) => {
              // 获取固定颜色
              const color = this.fixedColors[index % this.fixedColors.length];
              // 自定义 marker 的颜色
              const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${color};"></span>`;
              // 格式化显示的值
              const value = `&nbsp;&nbsp;&nbsp;<strong>${(parseInt(item.value) / wgtotal * 100).toFixed(2)}%  ( ${parseInt(item.value)} )</strong>`;
              total_num += parseInt(item.value);
              return `${marker}${item.seriesName}: ${value}`;
            }).join('<br/>');

            const totalLine = `<br/><br/><strong>总和: &nbsp;&nbsp;&nbsp;</strong><strong>${total_num}</strong>`;
            return `${axisLabel}<br/><br/>${tooltipContent}${totalLine}`;
          },
        },
        legend: {
          data: wgTrendLegend,
          itemWidth: 15,
          top: 0,
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: wgTrendTime
        },

        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: function (value) {
              return ((value / wgtotal) * 100).toFixed(0) + '%';
            }
          }
        },
        series: transformedWgTrend.slice(0, 5)
      };

      this.option8 = {
        tooltip: {
          order: 'valueDesc',
          trigger: 'axis',
          z: 9999,
          formatter: params => {
            const axisLabel = params[0].name;
            let total_num = 0;

            // 处理 tooltip 显示内容
            const tooltipContent = params.map((item, index) => {
              // 获取固定颜色
              const color = this.fixedColors[index % this.fixedColors.length];
              // 自定义 marker 的颜色
              const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${color};"></span>`;
              // 格式化显示的值
              const value = `&nbsp;&nbsp;&nbsp;<strong>${(parseInt(item.value) / fltotal * 100).toFixed(2)}%  ( ${parseInt(item.value)} )</strong>`;
              total_num += parseInt(item.value);
              return `${marker}${item.seriesName}: ${value}`;
            }).join('<br/>');

            const totalLine = `<br/><br/><strong>总和: &nbsp;&nbsp;&nbsp;</strong><strong>${total_num}</strong>`;
            return `${axisLabel}<br/><br/>${tooltipContent}${totalLine}`;
          },
        },
        legend: {
          data: flTrendLegend,
          itemWidth: 15,
          top: 0,
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: flTrendTime
        },

        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: function (value) {
              return ((value / fltotal) * 100).toFixed(0) + '%';
            }
          }
        },
        series: fltransformedWgTrend.slice(0, 5)
      };
      this.option7 && myChart7.setOption(this.option7, { notMerge: true });
      this.option8 && myChart8.setOption(this.option8, { notMerge: true });

    },
    init() {
      if(this.selectMenu!==2){
        return
      }
      const chartDom = document.getElementById('echarts');
      const myChart = echarts.init(chartDom);
      const chartDom2 = document.getElementById('echarts2');
      const myChart2 = echarts.init(chartDom2);

      const chartDom3 = document.getElementById('echarts3');
      const myChart3 = echarts.init(chartDom3);
      const chartDom4 = document.getElementById('echarts4');
      const myChart4 = echarts.init(chartDom4);

      const dataTitleWg = []
      const dataValWg = []
      const dataTitleFl = []
      const dataValFl = []
      const wgTrendTime = []
      const wgTrendLegend = []
      const flTrendTime = []
      const flTrendLegend = []
      const wgtotal = this.analysis.wgtotal;
      const fltotal = this.analysis.fltotal;
      const defectCountAll = this.defectCountAll;
      const that = this
      for (var i = 0; i < this.analysis.wgDefectTop.length; i++) {
        dataTitleWg.push(this.analysis.wgDefectTop[i].label)
        dataValWg.push(this.analysis.wgDefectTop[i].value)
      }

      for (var j = 0; j < this.analysis.flDefectTop.length; j++) {
        dataTitleFl.push(this.analysis.flDefectTop[j].label)
        dataValFl.push(this.analysis.flDefectTop[j].value)
      }
      for (var k = 0; k < this.analysis.wgTrend.length; k++) {
        wgTrendTime.push(this.analysis.wgTrend[k].dateTime)
        if (k === 0) {
          for (var m = 0; m < this.analysis.wgTrend[0].data.length; m++) {
            wgTrendLegend.push(this.analysis.wgTrend[0].data[m].label)
          }
        }
      }
      for (var b = 0; b < this.analysis.flTrend.length; b++) {
        flTrendTime.push(this.analysis.flTrend[b].dateTime)
        if (b === 0) {
          for (var p = 0; p < this.analysis.flTrend[0].data.length; p++) {
            flTrendLegend.push(this.analysis.flTrend[0].data[p].label)
          }
        }
      }

      const transformedWgTrend = this.analysis.wgTrend.reduce((acc, item) => {
        item.data.forEach((subItem) => {
          const index = acc.findIndex(
            (obj) => obj.name === subItem.label
          );
          if (index !== -1) {
            acc[index].data.push(subItem.value);
          } else {
            that.mapColors[subItem.label] = this.fixedColors[acc.length % this.fixedColors.length]
            acc.push({
              name: subItem.label,
              type: "line",
              data: [subItem.value],
              color: that.mapColors[subItem.label],
            });
          }
        });
        return acc;
      }, []);

      const fltransformedWgTrend = this.analysis.flTrend.reduce((acc, item) => {
        item.data.forEach((subItem) => {
          const index = acc.findIndex(
            (obj) => obj.name === subItem.label
          );
          if (index !== -1) {
            acc[index].data.push(subItem.value);
          } else {
            if(!(subItem.label in that.mapColors)){
              that.mapColors[subItem.label] = this.fixedColors[acc.length % this.fixedColors.length]
            }

            acc.push({
              name: subItem.label,
              type: "line",
              data: [subItem.value],
              color: that.mapColors[subItem.label],
            });
          }
        });
        return acc;
      }, []);

      this.option = {
        tooltip: {
          order: 'valueDesc',
          trigger: 'axis',
          z: 9999,
          axisPointer: {
            type: 'shadow'
          },

          formatter: params => {
            // 提取公共的时间轴标签
            const axisLabel = params[0].name;
            // 初始化总和变量
            let total_num = 0;
            // 处理 tooltip 显示内容
            const tooltipContent = params.map(item => {
              const marker = item.marker; // 获取对应颜色的实心点符号
              const value = `&nbsp;&nbsp;&nbsp;<strong>${(parseInt(item.value) / wgtotal * 100).toFixed(2)}%  ( ${parseInt(item.value)} )</strong>`; // 加黑加粗
              total_num += parseInt(item.value); // 累加总和

              // 检查是否为 'other' 系列
              if (item.name === '其它') {
                // 如果是 'other' 系列，详细列出其中的各项信息
                const otherDetails = this.analysis.wgOther.map(o_item => {
                  const otherLabel = `${marker}${o_item.label}: &nbsp;&nbsp;&nbsp;<strong>${(parseInt(o_item.value) / wgtotal * 100).toFixed(2)}%  ( ${parseInt(o_item.value)} )</strong>`;
                  return otherLabel;
                }).join('<br/>');
                // 将 'other' 系列的详细信息加入 tooltip
                return `${otherDetails}`;
              }

              // 其他系列保持原样，但加黑加粗
              return `${marker}${value}`;
            }).join('<br/>');

            // 最后添加总和
            const totalLine = `<br/><br/><strong>总和: &nbsp;&nbsp;&nbsp;</strong><strong>${total_num}</strong>`;
            return `${axisLabel}<br/><br/>${tooltipContent}${totalLine}`;
          },
          position: function (point, params, dom, rect, size) {
            const x = point[0] + 20; // 向右偏移 20 像素
            return [x, '0%'];
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: dataTitleWg,
          axisLabel: {
            // 控制文字显示
            formatter: function (value) {
              // 设置最大显示宽度
              const maxLength = 10; // 设置最大显示字符数
              if (value.length > maxLength) {
                return value.substring(0, maxLength) + '...'; // 超过长度截断并加省略号
              } else {
                return value;
              }
            },
            // 通过旋转标签来避免过长标签重叠
            // 设置标签的样式
            rich: {
              name: {
                width: 80, // 设定最大宽度
                overflow: 'break', // 超过宽度后换行显示
                ellipsis: true, // 超过宽度时显示省略号
              }
            },
            // 设置标签文字的显示宽度
            width: 80, // 设定最大宽度
            overflow: 'truncate', // 超过宽度时截断
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            data: dataValWg,
            itemStyle: {
              color: function (params) {
                console.log('itemstyle', params)
                // params是一个包含数据信息的对象，这里可以通过数据索引返回不同的颜色
                // var colorList = [
                //   '#0F62FE', '#6BB2FB', '#F061E7', '#FFDA2E', '#8A3BEF',
                //   '#09DA97', '#6884FF', '#FFA495', '#87D46A', '#6699FF'
                // ];
                if(!(params.name in that.mapColors)){
                  // that.mapColors[params.name] = that.fixedColors[params.dataIndex]
                  // if(params.name=='其他'){
                  //   console.log('========',that.mapColors)
                  //   that.mapColors[params.name] = that.fixedColors[that.fixedColors.length-1]
                  // }
                  var color = ''
                  for (let index = 0; index < that.fixedColors.length; index++) {
                    var item = that.fixedColors[index]
                    if(!(item in Object.values(that.mapColors))){
                      color = item
                    }
                  }
                  that.mapColors[params.name] = color
                }

                return that.mapColors[params.name];
              }
            }
          },
        ]
      };

      this.option2 = {
        tooltip: {
          order: 'valueDesc',
          trigger: 'axis',
          z: 9999,
          formatter: params => {
            const axisLabel = params[0].name;
            let total_num = 0;

            // 处理 tooltip 显示内容
            const tooltipContent = params.map((item, index) => {
              // 获取固定颜色
              const color = this.fixedColors[index % this.fixedColors.length];
              // 自定义 marker 的颜色
              const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${color};"></span>`;
              // 格式化显示的值
              const value = `&nbsp;&nbsp;&nbsp;<strong>${(parseInt(item.value) / wgtotal * 100).toFixed(2)}%  ( ${parseInt(item.value)} )</strong>`;
              total_num += parseInt(item.value);
              return `${marker}${item.seriesName}: ${value}`;
            }).join('<br/>');

            const totalLine = `<br/><br/><strong>总和: &nbsp;&nbsp;&nbsp;</strong><strong>${total_num}</strong>`;
            return `${axisLabel}<br/><br/>${tooltipContent}${totalLine}`;
          },
        },
        legend: {
          data: wgTrendLegend,
          itemWidth: 15,
          top: 0,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: wgTrendTime
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: (value) => {
              return ((value / wgtotal) * 100).toFixed(0) + '%';
            }
          }
        },
        series: transformedWgTrend.slice(0, 5)
      };


      this.option3 = {
        tooltip: {
          trigger: 'axis',
          order: 'valueDesc',
          axisPointer: {
            type: 'shadow'
          },
          formatter: params => {
            // 提取公共的时间轴标签
            const axisLabel = params[0].name;
            // 初始化总和变量
            let total_num = 0;
            // 处理 tooltip 显示内容
            const tooltipContent = params.map(item => {
              const marker = item.marker; // 获取对应颜色的实心点符号
              const value = `&nbsp;&nbsp;&nbsp;<strong>${(parseInt(item.value) / fltotal * 100).toFixed(2)}%  ( ${parseInt(item.value)} )</strong>`; // 加黑加粗
              total_num += parseInt(item.value); // 累加总和

              // 检查是否为 'other' 系列
              if (item.name === '其它') {
                // 如果是 'other' 系列，详细列出其中的各项信息
                const otherDetails = this.analysis.flOther.map(o_item => {
                  const otherLabel = `${marker}${o_item.label}: &nbsp;&nbsp;&nbsp;<strong>${(parseInt(o_item.value) / fltotal * 100).toFixed(2)}%  ( ${parseInt(o_item.value)} )</strong>`;
                  return otherLabel;
                }).join('<br/>');
                // 将 'other' 系列的详细信息加入 tooltip
                return `${otherDetails}`;
              }

              // 其他系列保持原样，但加黑加粗
              return `${marker}${value}`;
            }).join('<br/>');

            // 最后添加总和
            const totalLine = `<br/><br/><strong>总和: &nbsp;&nbsp;&nbsp;</strong><strong>${total_num}</strong>`;
            return `${axisLabel}<br/><br/>${tooltipContent}${totalLine}`;
          },
          position: function (point, params, dom, rect, size) {
            const x = point[0] + 20; // 向右偏移 20 像素
            return [x, '0%'];
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: dataTitleFl,
          axisLabel: {
            // 控制文字显示
            formatter: function (value) {
              // 设置最大显示宽度
              const maxLength = 10; // 设置最大显示字符数
              if (value.length > maxLength) {
                return value.substring(0, maxLength) + '...'; // 超过长度截断并加省略号
              } else {
                return value;
              }
            },
            // 通过旋转标签来避免过长标签重叠
            // 设置标签的样式
            rich: {
              name: {
                width: 80, // 设定最大宽度
                overflow: 'break', // 超过宽度后换行显示
                ellipsis: true, // 超过宽度时显示省略号
              }
            },
            // 设置标签文字的显示宽度
            width: 80, // 设定最大宽度
            overflow: 'truncate', // 超过宽度时截断
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            data: dataValFl,
            itemStyle: {
              color: (params) => {
                console.log('params-option3',params)
                // params是一个包含数据信息的对象，这里可以通过数据索引返回不同的颜色
                // return this.fixedColors[params.dataIndex];
                if(!(params.name in that.mapColors)){
                  //   that.mapColors[params.name] = that.fixedColors[params.dataIndex]
                  //   if(params.name=='其他'){
                  //     that.mapColors[params.name] = that.fixedColors[that.fixedColors.length-1]
                  //   }
                  var color = ''
                  for (let index = 0; index < that.fixedColors.length; index++) {
                    var item = that.fixedColors[index]
                    if(!(item in Object.values(that.mapColors))){
                      color = item
                    }
                  }
                  that.mapColors[params.name] = color
                }


                return that.mapColors[params.name];
              }
            }
          },
        ]
      };

      this.option4 = {
        tooltip: {
          order: 'valueDesc',
          trigger: 'axis',
          formatter: params => {
            const axisLabel = params[0].name;
            let total_num = 0;

            // 处理 tooltip 显示内容
            const tooltipContent = params.map((item, index) => {
              // 获取固定颜色
              const color = this.fixedColors[index % this.fixedColors.length];
              // 自定义 marker 的颜色
              const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${color};"></span>`;
              // 格式化显示的值
              const value = `&nbsp;&nbsp;&nbsp;<strong>${(parseInt(item.value) / fltotal * 100).toFixed(2)}%  ( ${parseInt(item.value)} )</strong>`;
              total_num += parseInt(item.value);
              return `${marker}${item.seriesName}: ${value}`;
            }).join('<br/>');

            const totalLine = `<br/><br/><strong>总和: &nbsp;&nbsp;&nbsp;</strong><strong>${total_num}</strong>`;
            return `${axisLabel}<br/><br/>${tooltipContent}${totalLine}`;
          },
        },
        legend: {
          data: flTrendLegend,
          itemWidth: 15,
          top: 0,
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: flTrendTime
        },

        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: function (value) {
              return ((value / fltotal ) * 100).toFixed(0) + '%';
            }
          }
        },
        series: fltransformedWgTrend.slice(0, 5)
      };


      this.option && myChart.setOption(this.option);
      this.option2 && myChart2.setOption(this.option2, { notMerge: true });
      this.option3 && myChart3.setOption(this.option3);
      this.option4 && myChart4.setOption(this.option4, { notMerge: true });
    },

    init5() {
      this.option5 = {
        tooltip: {
          order: 'valueDesc',
          trigger: 'item',
          formatter: (params) => {
            const percentage = ((params.value / this.option5SeriesTotal) * 100).toFixed(2);
            // 返回带有百分比的 tooltip 内容
            return `${params.marker} ${params.name}: ${percentage}% (${parseInt(params.value)})`;
          },
          position: function (point, params, dom, rect, size) {
            const {contentSize, viewSize} = size;
            const x = point[0] < contentSize[0] ? point[0] : point[0] - contentSize[0];
            const y = point[1] < contentSize[1] ? point[1] : point[1] - contentSize[1];
            return [x, y];
          },
        },
        legend: {
          top: 'bottom',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [],
            color: this.fixedColors,
          }
        ]
      };
      const chartDom5 = document.getElementById('echarts5');
      this.myChart5 = echarts.init(chartDom5);
      this.option5 && this.myChart5.setOption(this.option5, { notMerge: true });
    },
    handleProductNameChange(product_name) {
      if (product_name === "全部") {
        this.productColors = this.allColor
        this.queryMain.color = '全部'
      } else {
        this.productColors = [this.productNameAndColor[product_name]]
        this.queryMain.color = this.productNameAndColor[product_name]
      }
    }
  }
}
</script>
<style lang="less" >
.main_bottom {
  display: flex;
  flex: 1;
  flex-direction: row;
  background-color: #fff;

  border-bottom: 3px solid #ECEEF1;
  max-height: calc(100% - 75px);
  overflow-y: hidden;
  .main_left {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 180px;
    border-right: 3px solid #ECEEF1;

    .menu_item {
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 16px;
      font-weight: 600;
      border-bottom: 1px solid #ECEEF1;
      cursor: pointer;
    }
  }

  .main_right {
    flex: 1;
    background-color: #F0F3F8;
    overflow-y: hidden;
    .main_center {
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: column;

      .main_item {
        display: flex;
        flex-direction: column;
        height:calc(100% - 140px);
        width: 100%;

        .item_content {
          display: flex;
          height:calc(100%/2 - 0px);

          .content_echart {
            display: flex;
            flex-direction: column;
            flex: 3;
            background-color: #fff;
            margin-left: 10px;
            overflow-x: visible;
            .el-table{
              overflow: visible;
            }
            .el-table::before {
              display: none !important;
            }

            .total_show{
              position: absolute;
              left: 320px;
              top:18px;
              width: 100px;
              text-align: right
            }
            .top_content{
              width: 100%;
              display: flex;

            }
            .bottom_table {

              flex: 1;
              display: flex;

              margin: 20px;
              .table_list {
                display: flex;
                width: 100%;
                overflow-x: hidden;
                overflow-y: auto;
                flex-direction: column;
                border-left: 1px solid #F0F3F8;
                border-right: 1px solid #F0F3F8;

                .table_content {
                  display: flex;
                  border-left: 1px solid #F0F3F8;
                  border-right: 1px solid #F0F3F8;

                  .table_item {
                    display: flex;
                    flex-direction: column;
                    flex: 1;

                    .item_main {
                      height: 40px;
                      line-height: 40px;
                      box-sizing: border-box;
                      padding-left: 20px;
                      font-weight: 600;
                      font-size: 14px;
                      color: #2A2A2A;
                      border-bottom: 1px solid #F0F3F8;
                    }
                  }
                }

                .table_title {

                  display: flex;
                  background-color: #EBEFF5;
                  text-align: left;
                  line-height: 40px;
                  height: 40px;
                  font-weight: 600;
                  font-size: 14px;
                  color: #2A2A2A;

                  .title_item {
                    flex: 2;
                    box-sizing: border-box;
                    padding-left: 20px;
                  }
                }
                .item_list{
                  display: flex;
                  background-color: #fff;
                  text-align: left;
                  font-weight: 600;
                  font-size: 14px;
                  color: #2A2A2A;
                  flex: 1;
                  border-left: 1px solid #F0F3F8;
                  border-right: 1px solid #F0F3F8;
                  border-bottom: 1px solid #F0F3F8;
                  .item_span{
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    width: 100%;

                    font-size: 12px;
                    color: #2A2A2A;
                    .small_span{
                      height: 30px;
                      line-height: 30px;
                    }
                  }
                }
              }
              /deep/ .el-table {
                overflow-y: auto;
              }
              /deep/ .el-table .el-table__cell{
                padding: 0px;
                height: 40px;
              }
              /deep/ .el-table .cell{
                padding: 0px;
                text-indent: 10px;
                font-size: 12px;
              }
              /deep/  th.el-table__cell>.cell {
                font-size: 12px;
              }
            }

            .top_center_title {
              padding-left: 20px;
              width: 180px;
              font-weight: 600;
              font-size: 16px;
              color: #2A2A2A;
              padding-top: 20px;
            }
            .top_content{
              display: flex;
              flex-direction: row;

              width: 100%;
              margin-top: 10px;
              height: calc(100% - 20px);
              .top_img{
                display: flex;
                width: calc(100% - 40px);
                margin-left: 20px;
                height: 100%;
                background-color: #EFF1F3;
                justify-content: center;
                align-items: center;

                img{

                  width:270px;
                  border: 0;
                  outline: none;
                  box-shadow: none
                }
                img[src=""],
                img:not([src]){
                  opacity:0;
                }
              }

              .top_img_right{
                display: flex;
                align-items: center;
                flex-direction: column;
                margin-left: 60px;
                margin-top: 50px;
                .top_img_item{
                  width: 100px;
                  height: 24px;
                  display: flex;

                ;
                  .span_color{
                    background-color: #FFBF00;
                    width: 16px;
                    height: 16px;
                    border-radius: 16px;
                    font-size: 12px;
                    color:#fff;
                    text-align: center
                  }
                  .span_text{
                    font-weight: 600;
                    font-size: 12px;
                    color: #2A2A2A;
                    padding-left: 10px
                  }
                }
              }
            }
          }

          .content_text {
            background-color: #fff;
            width: 50px !important;
            min-width: 50px; /* 设置最小宽度 */
            max-width: 50px; /* 设置最大宽度 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            font-size: 18px;
            color: #2A2A2A;
            border-radius: 2px;
            writing-mode: vertical-rl;
          }
        }
      }

      .main_checkbox {
        width: 100%;
        display: flex;
        height: 50px;
        align-items: center;
        padding-left: 20px;
        box-sizing: border-box;

      }

      .menu_select {
        display: flex;
        width: 100%;
        height: 90px;
        background-color: #FFFFFF;
        border-bottom: 2px solid #ECEEF1;

        .data_list {
          flex: 2;
          display: flex;
          width: 100%;

          .btn_list {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-right: 30px;

            .btn {
              width: 110px;
              height: 26px;
              background: #DBDFE5;
              border-radius: 3px;
              text-align: center;
              line-height: 26px;
              font-size: 12px;
              color: #2A2A2A;
              border: 2px solid #DBDFE5;
              cursor: pointer;
            }

            .btn_export {
              width: 110px;
              height: 26px;
              background: #fff;
              border-radius: 3px;
              text-align: center;
              line-height: 26px;
              font-size: 12px;
              color: #2A2A2A;
              border: 2px solid #DBDFE5;
              cursor: pointer;
              background-image: url('../../assets/ic_date_export.png');
              background-repeat: no-repeat;
              background-size: 13px 16px;
              background-position: 10px 5px;
              padding-left: 5px;

            }
          }

          .select_item{
            display: flex;
            align-items: center;
            height: 100%;
            margin-left: 20px;
            .demonstration{
              width: 100px;
              text-align: right;
              padding-right: 10px;
              line-height: 40px;
              font-size:14px;
              // font-weight: 600;
            }
            /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
              width: 210px;
              margin-left: 10px;
              height: 40px;
            }
            /deep/ .el-input--suffix .el-input__inner {
              height: 40px;
            }
          }
          /deep/ .el-input__icon {
            line-height: 40px;
          }
          /deep/ .el-input{
            width: 210px;
            margin-left: 10px;
            height: 40px;
          }
          /deep/ .el-input__inner{
            line-height: 40px;
            height: 40px;
          }
          .el-table th.el-table__cell>.cell {
            font-size: 12px
          }
        }
      }
    }

    .main_content {
      display: flex;
      width: calc(100% - 10px);

      padding: 5px;
      height: calc(100% - 90px);
      .content_item {
        display: flex;
        flex: 1;
        flex-direction: column;
        height: 100%;
        overflow-y: hidden;
        .item_title {
          width: 100%;
          height: 28px;
          font-weight: 600;
          font-size: 18px;
          color: #2A2A2A;
          line-height: 40px;
          text-align: center;
        }

        .right_card_content {
          display: flex;
          flex-direction: column;
          flex: 1;
          background-color: #F0F3F8;
          margin-top: 20px;

          .card_top {
            display: flex;
            font-weight: 600;
            font-size: 16px;
            color: #2A2A2A;
            height: 50px;
            background-color: #fff;
            border-radius: 6px 6px 0 0;
            flex-direction: row;

            .title_list {
              flex: 1;
              text-align: center;
              height: 100%;
              line-height: 50px;
              font-size: 16px;
            }
          }

          .card_bottom {
            display: flex;
            flex: 1;
            margin-top: 5px;
            border-radius: 0 0 6px 6px;
            background-color: #fff;

            justify-content: flex-start;
            align-items: flex-start;
            overflow-y: hidden;
            .bottom_list::-webkit-scrollbar {
              width: 2px;
              opacity: 0.1;
            }
            .bottom_list::-webkit-scrollbar-thumb {
              border-radius: 2px;
              box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              background: transparent;
            }
            .bottom_list::-webkit-scrollbar-track {
              width: 2px;
            }
            .bottom_list {

              display: flex;
              justify-content: flex-start;
              align-items: center;
              flex-direction: column;
              flex: 1;

              max-height: 100%;
              margin-top: 20px;
              overflow-y: auto;
              .list_item {
                display: flex;
                flex-direction: row;
                line-height: 50px;
                height: 50px;
                justify-content: center;
                align-items: center;

                .bottom_item1 {
                  width: 16px;
                  height: 16px;
                  border-radius: 16px;
                  background-color: #1A80F3;
                }

                .bottom_item2 {
                  font-weight: 600;
                  font-size: 14px;
                  color: #2A2A2A;
                  width: 270px;
                  padding-left: 10px;
                }

                .bottom_item3 {
                  font-weight: 600;
                  font-size: 12px;
                  color: #2A2A2A;
                  padding-left: 5px;
                  width: 70px;
                }
              }

            }
          }
        }

        .item_main {
          display: flex;
          flex-direction: column;
          margin-top: 20px;
          flex: 1;
          .main_top {
            display: flex;

            flex: 1;
            .item_card {
              flex: 1;
              height: 100%;
              background-color: #fff;
              border-radius: 6px;
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;

              .card_list {
                width: calc(100% / 2 - 5px);
                height: calc(100% / 2 - 5px);
                background: #FFFFFF;
                border-radius: 6px;
                display: flex;

                .card_left {
                  display: flex;
                  flex-direction: column;
                  padding-top: 50px;
                  padding-left: 8px;
                  flex: 2;

                  .left_title {
                    font-weight: 600;
                    font-size: 16px;
                    color: #2a2a2a;
                  }

                  .left_title_children {
                    font-weight: 600;
                    font-size: 14px;
                    color: #2a2a2a; //#03172F
                  }



                  .left_per {
                    font-weight: 500;
                    font-size: 16px;
                    padding-top: 12px;
                  }

                  .left_per_children {
                    font-weight: 500;
                    font-size: 14px;
                    padding-top: 12px;
                  }

                  .left_content {
                    display: flex;
                    flex-direction: row;
                    font-size: 12px;
                    padding-top: 5px;

                    .percent_tip {
                      color: #03172F;
                      font-size: 12px;
                      padding-left: 0px;
                      padding-top: 0px;
                      transform: scale(0.8);
                    }

                    .percent {
                      font-size: 12px;
                    }

                    .percent_img {
                      width: 6px;
                      height: 10px;
                      padding-left: 4px;
                      padding-top: 4px;

                      img {
                        width: 100%;
                        height: 100%;

                        float: left;
                      }
                    }
                  }
                }

                .card_right {
                  display: flex;
                  flex: 1;
                  padding-top: 60px;
                  display: flex;
                  flex-direction: row-reverse;
                  padding-right: 10px;

                  .card_color {
                    width: 72px;
                    height: 22px;

                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
              }

              .card_left {
                display: flex;
                flex-direction: column;
                padding-top: 100px;
                padding-left: 20px;
                flex: 1;

                .left_title {
                  font-weight: 600;
                  font-size: 16px;
                  color: #03172F;

                }

                .left_per {
                  font-weight: 500;
                  font-size: 16px;

                  padding-top: 30px;
                }

                .left_content {
                  display: flex;
                  flex-direction: row;
                  font-size: 16px;
                  padding-top: 20px;

                  .percent_tip {
                    color: #03172F;
                    font-size: 12px;
                    padding-left: 10px;
                    padding-top: 4px;
                  }

                  .percent {
                    font-size: 16px;
                  }

                  .percent_img {
                    width: 8px;
                    height: 14px;
                    padding-left: 10px;
                    padding-top: 4px;

                    img {
                      width: 100%;
                      height: 100%;

                      float: left;
                    }
                  }
                }
              }

              .card_right {
                display: flex;
                flex: 1;
                padding-top: 120px;
                display: flex;
                flex-direction: row-reverse;
                padding-right: 20px;

                .card_color {
                  width: 156px;
                  height: 48px;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }

            }
          }
        }
      }
    }
  }

}
// .card_right:fullscreen{
//       padding-top: 110px !important;
//     }
// .card_left:fullscreen{
//     padding-top: 110px !important;
//   }
.main_content .el-row .el-col .is-always-shadow {
  height: 772px;
}
</style>
